（一個按鈕創建一個元素）多次

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

你的東西實際上可以將引用作爲參數傳遞給點擊按鈕作爲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

隨意問什麼。

Answer 2

如果使用類的按鈕，然後使用該ID的一個數字，它會很容易的目標屬於每個按鈕架次，像

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

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

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

 
function createSortie(sortie, button) { 
 
    var d = document.createElement("span"); 
 
    d.className = "label label-success"; 
 
    d.addEventListener('click', function() { 
 
    \t 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 3

我創建了一個搗鼓你，它主要是基於相對的選擇，而不是身份證，我通過在功能全元素，然後做在此基礎上採取進一步行動，看看

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