Question

我有一个jquery可排序表，每行都有一个on开关。我遇到两个问题：

只有第一行中的一个和关闭开关正在运行（在所有3个div上）和
只有前两个div（三分之一）的顶行开关功能 - 无论我更改div的顺序是什么。可排序的工作在三个主要div和他们的子行。这是我的代码示例：

HTML

<table width="100%">
  <tr>
    <td class='select'>Location</td>
    <td>
      <input type="text" name="alternateName" placeholder='text'>
    </td>
    <td>
      <div class="switch">
        <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
        <label for="cmn-toggle-1"></label>
      </div>

    </td>
  </tr>
</table>

<table width="100%">
  <tbody id='sortable'>
    <tr class="ui-state-default">
      <td>Location</td>
      <td>
        <input type="text" name="alternateName" placeholder='text'>
      </td>
      <td>
        <div class="switch">
          <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
          <label for="cmn-toggle-1"></label>
        </div>

      </td>
    </tr>
    <tr class="ui-state-default">
      <td>Location Two</td>
      <td>
        <input type="text" name="alternateName" placeholder='text'>
      </td>
      <td>
        <div class="switch">
          <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
          <label for="cmn-toggle-1"></label>
        </div>

      </td>
    </tr>
    <tr class="ui-state-default">
      <td>Location Three</td>
      <td>
        <input type="text" name="alternateName" placeholder='text'>
      </td>
      <td>
        <div class="switch">
          <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
          <label for="cmn-toggle-1"></label>
        </div>

      </td>
    </tr>
    <tr class="ui-state-default">
      <td>Location Four</td>
      <td>
        <input type="text" name="alternateName" placeholder='text'>
      </td>
      <td>
        <div class="switch">
          <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
          <label for="cmn-toggle-1"></label>
        </div>

      </td>
    </tr>
  </tbody>
</table>

库存

的jQuery

 <script>

  $(document).ready(function () {

      $(function () {
          $("#sortable").sortable();
          $("#sortable").disableSelection();
      });

      $(function () {
          $("#sortableTwo").sortable();
          $("#sortableTwo").disableSelection();
      });

      $(function () {
          $("#sortableThree").sortable();
          $("#sortableThree").disableSelection();
      });

      $(function () {
          $("#sortableBig").sortable();
          $("#sortableBig").disableSelection();
      });


  });

</script>

CSS

<style>
  .ui-state-default {
      border: solid #000;
      border-collapse: collapse;
  }

  #sortable,
  #sortableTwo,
  #sortableThree,
  #sortableBig {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
  }

  #sortable td,
  #sortableTwo td,
  #sortableThree td,
  #sortableBig {
      margin: 0 3px 3px 3px;
      padding: 0.4em;
      padding-left: 1.5em;
      font-size: 1em;
      height: 18px;
  }

  .btn-primary {
    background-color:#393;
  color:#fff;
  font-family:'Helvetica Neue',sans-serif;
  font-size:18px;
  line-height:30px;
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border:0;
  text-shadow:#1F5C1F 0 -1px 0;
  width:80px;
  height:32px;
  }

  .btn-defualt off {
  background-color:#b2b2b2;
  color:#fff;
  font-family:'Helvetica Neue',sans-serif;
  font-size:18px;
  line-height:30px;
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border:0;
  text-shadow:#666 0 -1px 0;
  width:80px;
  height:32px;
  }

  .onoffswitch {
    position: relative; width: 72px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  }
  .onoffswitch-checkbox {
    display: none;
  }
  .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 15px;
  }
  .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
  }
  .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 21px; padding: 0; line-height: 21px;
    font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  .onoffswitch-inner:before {
    content: "ON";
    padding-left: 12px;
    background-color: #34C145; color: #FFFFFF;
  }
  .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 12px;
    background-color: #EDEDED; color: #6B6A6A;
    text-align: right;
  }
  .onoffswitch-switch {
    display: block; width: 26px; margin: -2.5px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 15px;
    position: absolute; top: 0; bottom: 0; right: 47px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
  }
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
  }
</style>

关闭开关不使用JQuery可排序功能

0 个答案: