jQuery 可选择不将类插入所有子项答案

【问题标题】：jQuery Selectable to not insert classes into all childsjQuery 可选择不将类插入所有子项
【发布时间】：2018-12-13 14:09:58
【问题描述】：

感谢您的帮助。下面的代码是表格的一部分。我在表格行上有 Selectable 设置，因此它允许 td 是可选的并且有效。如您所见，jQuery Selectable 为所有内容添加了一个类...我不希望这样，因为我希望能够取消选择选择了td。取决于我是否点击了TD。我可能只是取消选择 td，但子对象仍然突出显示

$("tr.schedule__row").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable({

});

/*Stop from selecting the first column*/

.scheduleTableActual tbody td:first-child {
  pointer-events: none;
}

.ui-selected {
  background: #F39814 !important;
  color: white !important;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="scheduleTable" class="scheduleTableActual">

  <thead class="scheduleHeader">
    <tr class="scheduleHeader__row">
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Sessions</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Mon 06/25</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Tue 06/26</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Wed 06/27</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Thu 06/28</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Fri 06/29</div>
      </th>
    </tr>
  </thead>
  <tbody class="schedule__body">
    <tr class="schedule__row" id="172">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 1</span><span class="schedule__session--time">8:00 AM - 11:00 AM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="571" data-instancedate="06/25/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="572" data-instancedate="06/25/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="573" data-instancedate="06/25/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="306" data-instancedate="06/26/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="307" data-instancedate="06/26/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="338" data-instancedate="06/27/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="339" data-instancedate="06/27/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="340" data-instancedate="06/27/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="308" data-instancedate="06/28/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="309" data-instancedate="06/28/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/29/2018" class="schedule__cell--wrap"><input data-testid="46185" data-sessionid="172" data-instanceid="576" data-instancedate="06/29/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
    </tr>
    <tr class="schedule__row" id="173">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 2</span><span class="schedule__session--time">12:00 PM - 3:00 PM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="310" data-instancedate="06/25/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="311" data-instancedate="06/25/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="341" data-instancedate="06/26/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="342" data-instancedate="06/26/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="343" data-instancedate="06/26/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="312" data-instancedate="06/27/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="313" data-instancedate="06/27/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="344" data-instancedate="06/28/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="345" data-instancedate="06/28/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="346" data-instancedate="06/28/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/29/2018" class="schedule__cell--wrap"><svg data-instancedate="06/29/2018" class="schedule__cell--icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"><path fill="currentColor" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm2-18V8a2 2 0 1 0-4 0v6H8a2 2 0 1 0 0 4h6v6a2 2 0 1 0 4 0v-6h6a2 2 0 1 0 0-4h-6z"></path></svg></div>
      </td>
    </tr>
  </tbody>
</table>

https://codepen.io/54696d20/pen/EGPjag

你可以在 codepen 上看到我的意思。单击，拖动（就像您试图突出显示所有内容一样），然后单击每个。我会注意到单词保持突出显示。这会导致 Selectable 的未选择方法出现问题

【问题讨论】：

@Pete Cool。我更新了它，它正在工作（显示示例）/不工作（我需要它做什么）lol
很好，我给了你一个赞成票来取消另一个反对票，现在它已经修复了
@Pete 谢谢！我什至不知道它在那里。下次我一定会用它

标签： jquery html jquery-ui

【解决方案1】：

我总是这样做，但我有答案。我在所选方法中添加了一些代码

$("tr.schedule__row").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable({
   selected: function (event, ui) {
        $('div.schedule__cell--wrap').removeClass("ui-selected");
        $('div.schedule__cell--wrap > span.ui-selectee').removeClass("ui-selected");
        $('div.schedule__cell--wrap > br').removeClass("ui-selected");
    },
});

/*Stop from selecting the first column*/

.scheduleTableActual tbody td:first-child {
  pointer-events: none;
}

.ui-selected {
  background: #F39814 !important;
  color: white !important;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="scheduleTable" class="scheduleTableActual">

  <thead class="scheduleHeader">
    <tr class="scheduleHeader__row">
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Sessions</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Mon 06/25</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Tue 06/26</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Wed 06/27</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Thu 06/28</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Fri 06/29</div>
      </th>
    </tr>
  </thead>
  <tbody class="schedule__body">
    <tr class="schedule__row" id="172">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 1</span><span class="schedule__session--time">8:00 AM - 11:00 AM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="571" data-instancedate="06/25/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="572" data-instancedate="06/25/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="573" data-instancedate="06/25/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="306" data-instancedate="06/26/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="307" data-instancedate="06/26/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="338" data-instancedate="06/27/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="339" data-instancedate="06/27/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="340" data-instancedate="06/27/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="308" data-instancedate="06/28/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="309" data-instancedate="06/28/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/29/2018" class="schedule__cell--wrap"><input data-testid="46185" data-sessionid="172" data-instanceid="576" data-instancedate="06/29/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
    </tr>
    <tr class="schedule__row" id="173">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 2</span><span class="schedule__session--time">12:00 PM - 3:00 PM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="310" data-instancedate="06/25/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="311" data-instancedate="06/25/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="341" data-instancedate="06/26/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="342" data-instancedate="06/26/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="343" data-instancedate="06/26/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="312" data-instancedate="06/27/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="313" data-instancedate="06/27/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="344" data-instancedate="06/28/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="345" data-instancedate="06/28/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="346" data-instancedate="06/28/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/29/2018" class="schedule__cell--wrap"><svg data-instancedate="06/29/2018" class="schedule__cell--icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"><path fill="currentColor" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm2-18V8a2 2 0 1 0-4 0v6H8a2 2 0 1 0 0 4h6v6a2 2 0 1 0 4 0v-6h6a2 2 0 1 0 0-4h-6z"></path></svg></div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：