Блог

Главная - Вопросы по программированию - Как я могу добавить класс к элементу, если привязка внутри элемента списка активна?

Как я могу добавить класс к элементу, если привязка внутри элемента списка активна?

#html #jquery

Вопрос:

У меня есть такая структура:

 <div id="prev-button">
  Previous
</div>
<ul class="thumbnails">
  <li class="" data-skus="">
    <a class="thumbnail active">
      <img src=""></a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src=""></a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src=""></a>
  </li>
</ul>
<div id="next-button">
  Next
</div>

Мне нужно добавить new-class id="prev-button" , когда у первого <li> есть active класс для своего <a> ребенка.

Когда у первого якоря нет active класса, удалите new-class из id="prev-button"

Кроме того, когда последний элемент списка имеет active класс, добавленный в его дочерний якорь, то же new-class самое должно быть добавлено в id="next-button" .

Я попытался добавить new-class в родительский список элемент, когда привязка имеет active класс и не работает.

 if ($('.thumbnail').is(".active")) {
    $(this).parent().addClass("active");
}

Комментарии:

1. Подсказка: Используйте реальные элементы кнопок для обеспечения доступности или, по крайней мере, применяйте соответствующие роли ARIA .

2. Где ты набираешь этот код? Пожалуйста, пересмотрите свой пост, чтобы показать функционирующий фрагмент. jQuery доступен прямо из редактора фрагментов.

Ответ №1:

Вы можете использовать .index , чтобы узнать последовательный порядок выбранного элемента. Таким образом, в зависимости от того, какой из них активен, следующее выражение:

 $(".thumbnail.active").parent().index()

будет оцениваться как 0, 1 или 2.

Затем с toggleClass() помощью вы можете установить «новый класс» на первой кнопке, когда и только если этот индекс равен 0, и нечто подобное можно сделать для другой кнопки.

Вот демо-версия:

 // The argument to this function determines how the current selection should move:
// 0: don't move it; just apply the necessary CSS
// 1: move it down
// -1: move it up
function select(dir) {
    let last = $(".thumbnail").length - 1;
    let curr = $(".thumbnail.active").parent().index()   dir;
    if (curr >= 0 amp;amp; curr <= last) {
        $(".thumbnail").removeClass("active").eq(curr).addClass("active");
        $("#prev-button").toggleClass("disabled", curr == 0);
        $("#next-button").toggleClass("disabled", curr == last);
    }
}

$("#prev-button").click(select.bind(0, -1));
$("#next-button").click(select.bind(0, 1));
select(0); // initialise also on page load 
 #prev-button, #next-button {
  padding: 5px;
  text-align: center;
  background: lightblue;
  display: inline-block;
  user-select: none;
  cursor: pointer;
}

.active { background: yellow }
#prev-button.disabled, #next-button.disabled { background: silver } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="prev-button">
  Previous
</div>
<ul class="thumbnails">
  <li class="" data-skus="">
    <a class="thumbnail active">
      <img src="">first</a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src="">second</a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src="">third</a>
  </li>
</ul>
<div id="next-button">
  Next
</div>

Без parent().index() :

Вышеизложенное довольно чувствительно к структуре документа. В качестве альтернативы вы можете использовать index с аргументом, который работает так же, как indexOf и с массивами:

 // The argument to this function determines how the current selection should move:
// 0: don't move it; just apply the necessary CSS
// 1: move it down
// -1: move it up
function select(dir) {
    let $links = $(".thumbnail");
    let $active = $links.filter(".active");
    let curr = $links.index($active)   dir;
    let last = $links.length - 1;
    if (curr >= 0 amp;amp; curr <= last) {
        $(".thumbnail").removeClass("active").eq(curr).addClass("active");
        $("#prev-button").toggleClass("disabled", curr == 0);
        $("#next-button").toggleClass("disabled", curr == last);
    }
}

$("#prev-button").click(select.bind(0, -1));
$("#next-button").click(select.bind(0, 1));
select(0); // initialise also on page load 
 #prev-button, #next-button {
  padding: 5px;
  text-align: center;
  background: lightblue;
  display: inline-block;
  user-select: none;
  cursor: pointer;
}

.active { background: yellow }
#prev-button.disabled, #next-button.disabled { background: silver } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="prev-button">
  Previous
</div>
<ul class="thumbnails">
  <li class="" data-skus="">
    <a class="thumbnail active">
      <img src="">first</a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src="">second</a>
  </li>
  <li class="" data-skus="">
    <a class="thumbnail">
      <img src="">third</a>
  </li>
</ul>
<div id="next-button">
  Next
</div>

Комментарии:

1. Когда последний элемент списка добавляет активный класс к своему дочернему якорю, тот же новый класс должен быть добавлен в id=»кнопка далее»-Можем ли мы сделать это без использования какого-либо индекса? Этот метод мешает работе jscarousel lite, которую я использую. Что-то вроде $(‘ul li:последний ребенок a.активный’)…. Спасибо

2. Что касается вашей первой фразы: я считаю, что именно это делает мой ответ, когда вы запускаете фрагмент. Что касается вашего вопроса: вы можете обойтись без этого index() . Есть еще одна подпись index того, где вы передаете аргумент. Тогда это работает совершенно по-другому, и, возможно, это то, что вы ищете. Я добавил второй фрагмент, в котором используется эта идея.

3. Я добавил код, и большие пальцы карусели прыгают с 2 на 2 и выше 1 (так как это последнее изображение), а также класс disabled не добавлен (существующий код уже объявлен .отключен, поэтому я изменил ваш код на disabled1 и, как я уже сказал, он не добавляет новый класс. Знаете ли вы, как добавить новый класс к кнопке «Далее» только тогда, когда у последнего li есть ребенок с .active ? $(‘ul li:последний ребенок a.активный’)- — — — что должно быть здесь, чтобы переключить новый класс для следующей кнопки? Спасибо

4. Извините, но все, что я могу сказать, это то, что в этом фрагменте это работает. Если у вас другая ситуация, я предлагаю вам опубликовать новый вопрос, содержащий код для воспроизведения возникшей у вас проблемы

5. Спасибо за всю вашу помощь. Опубликовать новый код невозможно, потому что галерея создается из html php jquery. Я попытался получить весь соответствующий код, но мне не удалось создать правильный jsfiddle.

Ответ №2:

Почему вы пытаетесь получить доступ к id="prev-button" с $(this).parent().addClass("active"); ? Родителем будет li элемент. Почему бы не использовать $("#prev-button") для доступа к кнопке prev?

Вы можете создать игровую площадку на Codepen.io чтобы поэкспериментировать, например. Я создал один такой, который является первым исправлением того, о чем вы просили: https://codepen.io/peter-krebs/pen/xxdxoPZ

https://api.jquery.com/ содержит массу ресурсов, которые вы можете прочитать с помощью примера кода. Не бойтесь заниматься самообразованием, не просто догадывайтесь, как это работает.

Метки: ,