複数のonclickボタンをフォーマットする最も良い方法

Question

もう一度！私はいつもここでこのような偉大な反応を得る！

私は現在、ユーザーが特定の通知サービスに「オプトイン」できるjs機能を呼び出す複数のonclickボタンを備えたHTMLサイトを持っています。ユーザーが複数のグループに参加したい場合は、各ボタンを1つずつ押す必要があります。

それは技術的には機能しますが、あなたが想像しているように、きれいに見えません。さらに、今設定されている方法では、ユーザーはグループに正常に登録したというフィードバックを得ることはできません。ここで

は今、コードのスニップです：

<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以上を持っていることに注意すべきかなり圧倒的です。

これをフォーマットするには誰でも優雅なやり方がありますか？ 私は弾丸をすると思っていましたが、私はsubmitSubscriberToSegmentを別の送信ボタンの異なる値で実行するようにフォームを取得することに苦労しました。

確かに私には専門知識が不足しているため、私は困惑してしまいました。多分あなたの中には私のためのより良い解決策がありますか？

ありがとうございます！

Answer 1

このような目的でネストされたチェックボックスを実行します。各オプションにはチェックボックスがありますが、オプションのグループを有効/無効にするためにオンまたはオフをチェックできる一般的なセクションもあります。 this codepenをlonekoreanで見てみましょう。それらのスタイルを設定する方法については、javascriptを少し追加して、親チェックボックスで子アイテムを有効/無効にすることができます。

Answer 2

おそらく、u_mulderで述べたように、ボタンをチェックボックスに置き換えることをお勧めします。

いずれにしても、オンザフライで配列にプッシュするのではなく、サブスクリプションと通知を処理できる関数を作成する方がよいでしょう。例えば

：ヨルダン・デイヴィスによってコメントとして

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

次にあなたがこの機能をリンクするのEventListenerを追加します。

ボタンをチェックボックスで効果的に置き換える場合は、サブスクリプションコードを各チェックボックスの名前または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>