jQuery Выбирается, чтобы не вставлять классы во всех дочерних - PullRequest
Новая
       5

jQuery Выбирается, чтобы не вставлять классы во всех дочерних

0 голосов
/ 13 декабря 2018

Спасибо за помощь.Код ниже является частью таблицы.У меня есть настройка Selectable в строке таблицы, поэтому она позволяет выбирать td, и это работает .. Как вы заметили, jQuery Selectable добавляет класс ко ВСЕМУ ... Я не хочу этого, потому что хочу иметь возможность отменить выборвыбранный тд.В зависимости от того, где я нажимаю на ТД.Я мог бы просто отменить выбор тд, но дочерние объекты по-прежнему подсвечиваются 

$("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

Вы можете видеть, что я имею в виду на коде.Нажмите, перетащите (как вы пытаетесь выделить все), а затем нажмите каждый.Я заметил, что слова остаются выделенными.Это вызывает проблему с невыбранным методом Selectable

1 Ответ

0 голосов
/ 13 декабря 2018

Я всегда так делаю, но у меня есть ответ.Я добавил некоторый код в выбранный метод 

$("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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...