Question

再次回来！我总是在这里得到如此好的回应！

我目前有一个带有多个onclick按钮的HTML网站，调用js功能，允许用户选择＆＃34;选择加入＆＃34;某些通知服务。如果用户想要操作多个组，则需要一次按下每个按钮。

它在技术上有效，但你可以想象它看起来并不漂亮。此外，它现在的设置方式，用户没有得到他们已成功订阅该组的任何反馈（尽管不是一个大问题）。

现在，这是一段代码：

＆＃13;

            "transparency": 1,
            "transparent": [0,
            0,
            0,
            1]

＆＃13;

我还应该注意，虽然我在这里只列出了5个按钮，但网站实际上有超过20个...这是非常压倒性的。

有没有人有一种优雅的方式（对建议开放）来格式化这个？我想过做子弹，但我努力让表单运行＆＃39; addSubscriberToSegment＆＃39;使用一个提交按钮的不同值。

当然，我缺乏专业知识让我感到难过。也许你们中的一些人会为我提供更好的解决方案？

谢谢！

Answer 1

我会为这样的东西做嵌套复选框。每个选项都有一个复选框，但也有一些常规部分可以打开或关闭以启用/禁用一组选项。通过 lonekorean 查看this codepen了解如何设置样式，您可以添加一些javascript来使父复选框启用/禁用其子项。< / p>

Answer 2

最好的方法可能是用复选框替换你的按钮，如u_mulder所述。

在任何情况下，最好创建一个函数，您可以在其中处理订阅和通知，而不是动态地将事物推送到数组中。

例如：

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

然后添加一个由Jordan Davis评论的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>

格式化多个onclick按钮的最佳方法

2 个答案: