Блог

Я пытаюсь настроить настройку, в которой есть несколько кнопок, каждая из которых добавляет один элемент (и только один) в список (далее по моей веб-странице) отключает кнопку, на которую только что нажали (но не другие кнопки). Более того, если вы нажмете на соответствующий созданный элемент, он удалит себя и вернет соответствующую кнопку.

Мне удалось сделать это для одного экземпляра кнопки со следующим кодом :

Javascript :

 var btn1 = document.getElementById('btn1')
  , sortie = document.getElementById('sortie');

function createSortie() {
    var d = document.createElement("span");
    d.id = "sortieBtn1";
    d.className = "label label-success";
    d.onclick = removeSelf;
    d.innerHTML = "Hey, sup', now click on me to make me disappear";
    sortie.appendChild(d);
}

function removeSelf() {
    document.getElementById('sortieBtn1').remove();
    document.getElementById('btn1').disabled = false;

}

function modifyButton(a) {
    document.getElementById(a).disabled = true;
}
  

HTML :

 <button class="btn btn-primary" id="btn1" onclick="createSortie();modifyButton(this.id)">Click on me to create a new element</button><br />
<br/>
<br/>
Sortie :
<div id="sortie"></div>
  

Пример : http://www.codeply.com/go/SEL7ZqBI49

Теперь я хочу это для нескольких кнопок, я мог бы, конечно, сделать что-то подобное, но есть более разумные способы добиться того, что мне нужно (*), а именно, большего количества кнопок и, очевидно, без назначения функций для каждой пары кнопка / созданный элемент.

(*) : возможно — но не обязательно — с чем-то похожим на фабрики функций в R?

Есть идеи о том, как этого добиться? Спасибо.

На самом деле вы можете передать ссылку на нажатую кнопку в качестве параметра onclick функции, что значительно упрощает работу, чем пытаться работать с id s. Кроме того, вам не придется каждый раз находить элементы, и, таким образом, вы можете применять столько элементов, сколько захотите. Проверьте рабочий пример:

 var btns = document.getElementsByClassName('.btn'),
  sortie = document.getElementById('sortie');

// Creates the labels on the output div when a button is clicked
function createSortie(button) {
  // Create a label using a <span> element
  var label = document.createElement("span");

  // The ID will not be used but it's useful to link it to the 
  // originating button in some way
  label.id = "sortie"   button.id;

  label.className = "label label-success";

  // Set click handler on the label
  label.onclick = function() {
    // Remove itself, using self-reference as argument
    removeLabel(label);

    // Toggle the originating button to enabled again
    // (disabled = false)
    toggleButton(button, false);
  };

  label.innerHTML = "I''m label for "   button.id;

  // Set button to disabled
  toggleButton(button, true);

  // Add this label to sortie
  sortie.appendChild(label);
}

// Removes a label, passed as parameter
function removeLabel(label) {
  label.remove();
}

// Toggles a button ON or OFF, as specified on the state parameter
function toggleButton(button, state) {
  button.disabled = state;
}  

 .label {
  cursor: pointer;
  display: block;
}  

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h3>Buttons</h3>

<button class="btn btn-primary" id="btn1" onclick="createSortie(this);">Element 1</button>
<br />
<button class="btn btn-primary" id="btn2" onclick="createSortie(this);">Element 2</button>

<h3>Sortie :</h3>

<div id="sortie">
</div>  

Я также разветвил ваш Codeply: http://www.codeply.com/go/cJwYL0iBeY

Не стесняйтесь спрашивать что угодно.

Если вы используете классы для кнопок, а затем используете число в идентификаторах, было бы легко настроить таргетинг на sortie, принадлежащий каждой кнопке, что-то вроде

 var buttons = document.getElementsByClassName('btn');

for (var i=0; i<buttons.length; i  ) {
	buttons[i].addEventListener('click', btnClick);
}

function  btnClick() {
	var sortie = document.getElementById('sortie'   this.id.replace('btn',''));
	createSortie(sortie, this);
}

function createSortie(sortie, button) {
    var d = document.createElement("span");
    d.className = "label label-success";
    d.addEventListener('click', function() {
    	button.disabled = false;
        this.remove();
    });
    d.innerHTML = "Hey, sup', now click on me to make me disappear";
    sortie.appendChild(d);
    button.disabled = true;
}  

 <button class="btn btn-primary" id="btn1">Click on me to create a new element</button><br />
<br/><br/>
Sortie :
<div id="sortie1"></div>
<br/><br/>
<button class="btn btn-primary" id="btn2">Click on me to create a new element</button><br />
<br/><br/>
Sortie :
<div id="sortie2"></div>
<br/><br/>
<button class="btn btn-primary" id="btn3">Click on me to create a new element</button><br />
<br/><br/>
Sortie :
<div id="sortie3"></div>  

Я создал для вас скрипку, она в основном основана на относительном выборе, а не на идентификаторах, я передаю весь элемент в функции, а затем выполняю дальнейшие действия на этой основе, посмотрите

Скрипка

HTML

 <div>
<button class="btn btn-primary" id="btn1" onclick="createSortie(this);modifyButton(this)">Click on me to create a new element</button><br />
<br/>
<br/>
Sortie :
<div class="sortie"></div>
</div>

<div>
<button class="btn btn-primary" id="btn1" onclick="createSortie(this);modifyButton(this)">Click on me to create a new element</button><br />
<br/>
<br/>
Sortie :
<div class="sortie"></div>
</div>
  

JS

 function createSortie(elem) {

  elem.parentElement.querySelector('.sortie').innerHTML ='<span class="label label-success" onclick="removeSelf(this)">Hey, sup, now click on me to make me disappear</span>';
}

function removeSelf(ele) {
console.log( ele.parentElement.parentElement.querySelector('button'));

    ele.parentElement.parentElement.querySelector('button').removeAttribute('disabled')

ele.remove();
}

function modifyButton(ele) {
   ele.setAttribute('disabled','disabled')
}