Question

我正在尝试设置一个设置，其中有多个按钮，每个按钮都添加一个元素（和一个仅添加到列表中）（在我的网页下方）+禁用刚刚单击的按钮（但不是其他按钮）。此外，如果单击创建的相应元素，它将删除自身并重新启用相应的按钮。

我设法为一个按钮实例做了这个，使用以下代码：

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

我现在想要它用于多个按钮，我当然可以做一些事情like this，但有更智能的方法来实现我需要的东西（*），即更多的按钮，显然，没有指定的功能每对按钮/创建的元素。

（*）：也许 - 但不是强制性的 - 与R中的function factories类似的东西？

关于如何实现这一点的任何想法？感谢。

Answer 1

如果您使用按钮的类，然后使用ID中的数字，那么很容易定位属于每个按钮的排序，例如

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>

Answer 2

您实际上可以将对单击按钮的引用作为参数传递给onclick函数，这比使用id更容易。此外，您不必每次都能找到元素，因此您可以根据需要申请任意数量的项目。检查一个工作示例：

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

随意提出任何问题。

Answer 3

我为你创建了一个小提琴，它主要基于相对选择而不是ID，我在函数中传递整个元素，然后在此基础上做进一步的操作，看看

Fiddle

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')
}

（一个按钮创建一个元素）多次

3 个答案: