格式化多個onclick按鈕的最佳方式

我目前有一個帶有多個onclick按鈕的HTML網站，它調用了一個js函數，允許用戶「選擇」某些通知服務。如果用戶想要加入多個組，他們需要一次點擊一個按鈕。

它在技術上有效，但正如你可以想象的那樣，它看起來並不漂亮。此外，它現在設置的方式，用戶沒有得到任何他們已經成功訂閱了所述組的反饋（儘管如此，並不是很大的擔憂）。

下面的代碼的剪斷現在：

<button onclick="_pcq.push(['addSubscriberToSegment', '50cc']);"> 
 
50cc 
 
</button> 
 
<button onclick="_pcq.push(['addSubscriberToSegment', '65a']);"> 
 
65A 
 
</button> 
 
<button onclick="_pcq.push(['addSubscriberToSegment', '65b']);"> 
 
65B 
 
</button> 
 
<button onclick="_pcq.push(['addSubscriberToSegment', '85a']);"> 
 
85A 
 
</button> 
 
<button onclick="_pcq.push(['addSubscriberToSegment', '85b']);"> 
 
85B 
 
</button>

我還要指出的是，雖然我只在這裏列出的5個按鈕，網站居然有20多...這是相當壓倒性的。

有沒有人有一個優雅的方式（開放建議）來格式化？我想到做子彈，但我努力讓表單運行'addSubscriberToSegment'，其中一個提交按鈕的值不同。

當然，這只是我缺乏專業知識而讓我難住。也許你們中的一些人會爲我提供更好的解決方案？

謝謝！

來源

2016-03-20 Mark

與複選框更換？ –

內聯事件的整個技巧不好，請使用'EventTarget.addEventListener（）'https：//developer.mozilla。org/en-US/docs/Web/API/EventTarget/addEventListener –

即使您現有的佈局可以更優雅地實現，通過使它們成爲<按鈕數據段=「50cc」> 50cc'然後使用單個委託點擊處理程序，它從'data-'屬性中檢索要添加的值。（或者，如果該值始終與按鈕文本相同，則可以省略'data-'屬性。） – nnnnnn

我會做這樣的嵌套複選框。每個選項都有一個複選框，但也有一些常規部分，您可以選中或取消以啓用/禁用一組選項。看看this codepen作者：lonekorean想法如何設計它們，你可以添加一點點javascript使父項複選框啓用/禁用他們的子項目。

來源

2016-05-14 00:33:58 yelsayed

最好的方法可能是用複選框替換你的按鈕，正如u_mulder所述。

在任何情況下，最好創建一個函數，在這個函數中你可以處理訂閱和通知，而不是在飛行中將事情推入數組中。

例如：

function subscribeAnything(codeVariable){ 
    _pcq.push(codeVariable); 
    alert("Great you have subscribed to " + codeVariable); 
}

然後添加作爲評價約旦戴維斯關聯此功能的事件監聽。

如果您決定通過複選框來有效替換按鈕，您可以將預訂代碼設置爲每個複選框的名稱或ID，然後循環通過複選框將它們推送到您的數組中。

var myChbxArray = []; 
 
var btn = document.getElementById("pushCheckBoxes"); 
 
btn.addEventListener("click", pushAllChbxIntoArray, false); 
 

 
function pushAllChbxIntoArray(){ 
 
    myChbxArray = []; // clear content of array 
 
    
 
    var inputs = document.getElementsByTagName("input"); 
 
    
 
    for(var i = 0; i < inputs.length; i++) { 
 
     if(inputs[i].type == "checkbox" && inputs[i].checked == true) { 
 
      myChbxArray.push(inputs[i].name); 
 
     } 
 
    } 
 
    
 
    notification(); 
 
} 
 

 
function notification(){ 
 
    var myDiv = document.getElementById("result"); 
 
    
 
    myDiv.innerHTML = "You have checked the following checkboxes:<br>"; 
 
    
 
    for(var i = 0; i < myChbxArray.length; i++) { 
 
     myDiv.innerHTML = myDiv.innerHTML + myChbxArray[i] + "<br>"; 
 
    } 
 
}

ul{ 
 
    list-style-type: none; 
 
    }

<div id="checkboxList"> 
 
    <ul> 
 
    <li><label for="chk1"><input type="checkbox" name="chk1" id="chk1">Chk1</label></li> 
 
    <li><label for="chk2"><input type="checkbox" name="chk2" id="chk2">Chk2</label></li> 
 
    <li><label for="chk3"><input type="checkbox" name="chk3" id="chk3">Chk3</label></li> 
 
    <li><label for="chk4"><input type="checkbox" name="chk4" id="chk4">Chk4</label></li> 
 
    </ul> 
 
    <button id="pushCheckBoxes">ClickMe</button> 
 
</div> 
 
<div id="result"> 
 
    &nbsp; 
 
</div>

來源

2016-05-14 00:47:42

格式化多個onclick按鈕的最佳方式

回答

相關問題