使用 Ratchet 时有没有办法选择每个切换？答案

【问题标题】：Is there a way to select each toggle when using Ratchet?使用 Ratchet 时有没有办法选择每个切换？
【发布时间】：2015-04-04 09:52:51
【问题描述】：

我正在从数据库中动态加载一个类列表，如果它们已经完成，用户应该选择这些类列表。我正在使用 Ratchet 的切换来选择类，并尝试使用 JavaScript 函数来查找已切换的切换 - 到目前为止，没有运气。我对 JavaScript 不是很精通，所以如果这看起来微不足道，我深表歉意。我一直在尝试使用的功能，类如何显示到网页上，以及处理切换的CSS的内容如下：

  <script type="text/javascript">
    function checkClasses() {
      var classes = new Array();
      classes.push("COSC120");
      alert(classes[0]);

      $("input:checkbox[name=type]:checked").each(function()
      {
        classes.push($(this).val());
      });
    }
  </script>

将类写入页面：

echo '<div class="toggle" id="' .$row['class_id']. '" name="type">';
echo '<div class="toggle-handle"></div>';
echo '</div>';

css:

.toggle {
      position: relative;
      display: block;
      width: 74px;
      height: 30px;
      background-color: #fff;
      border: 2px solid #ddd;
      border-radius: 20px;
      -webkit-transition-duration: .5s;
         -moz-transition-duration: .5s;
              transition-duration: .5s;
      -webkit-transition-property: background-color, border;
         -moz-transition-property: background-color, border;
              transition-property: background-color, border;
    }
    .toggle .toggle-handle {
      position: absolute;
      top: -1px;
      left: -1px;
      z-index: 2;
      width: 28px;
      height: 28px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 100px;
      -webkit-transition-duration: .5s;
         -moz-transition-duration: .5s;
              transition-duration: .5s;
      -webkit-transition-property: -webkit-transform, border, width;
         -moz-transition-property:    -moz-transform, border, width;
              transition-property:         transform, border, width;
    }
    .toggle:before {
      position: absolute;
      top: 3px;
      right: 11px;
      font-size: 13px;
      color: #999;
      text-transform: uppercase;
      content: "no";
    }
    .toggle.active {
      background-color: #ff7e00;
      border: 2px solid #ff7e00;
    }
    .toggle.active .toggle-handle {
      border-color: #ff7e00;
      -webkit-transform: translate3d(44px, 0, 0);
          -ms-transform: translate3d(44px, 0, 0);
              transform: translate3d(44px, 0, 0);
    }
    .toggle.active:before {
      right: auto;
      left: 15px;
      color: #fff;
      content: "yes";
    }
    .toggle input[type="checkbox"] {
      display: none;
    }

我不知道是否需要更多帮助，但如果需要，请询问！提前谢谢！

【问题讨论】：

标签： javascript jquery html css ratchet-2

【解决方案1】：

Ratchet 会将active 添加到元素的类列表中，因此$('.toggle.active') 将为您提供一个活动切换开关数组

【讨论】：

谢谢！ $('.toggle.active') 是我需要的关键。有了它和我发现var selected = document.querySelectorAll('.toggle.active'); 的一个功能，它就可以工作了。