Простой обход dom с использованием jquery - PullRequest
Новая
       32

Простой обход dom с использованием jquery

0 голосов
/ 10 июля 2019

Я работаю с предыдущим кодом звездного рейтинга разработчиков. Мне нужно изменить его, потому что он работает не так, как задумал разработчик. Если вы посмотрите, там есть label элементы со звездами внутри. Вы видите, что первый label имеет 1 span, а 5-й label имеет 5 spans.

Пример того, как это работает сейчас, - вы нажимаете на 5-й input, у разработчика есть 5 звезд внутри label, но чтобы заставить его работать по назначению Мне действительно нужно изменить другие диапазоны меток а также . Итак, скажем, пользователь выбирает 3 звезды, мне нужно изменить span внутри меток 1, 2 и 3. Чтобы выбрать 4 звезды, мне нужно изменить span внутри меток 1, 2, 3 и 4.

Я думал о решении jquery / javascript, которое обходит метки (возможно, с помощью идентификаторов). Поэтому, если они нажмут на ввод 4, решение javascript будет проходить по всем промежуткам внутри меток 1, 2, 3 и 4 и обновлять css. Я не уверен, как это сделать. 

<div class="rating-selector">
    <label>
        <input type="radio" name="rating" value="1" />
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="2" />
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="3" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>   
    </label>
    <label>
        <input type="radio" name="rating" value="4" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
    <label>
        <input type="radio" name="rating" value="5" />
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
        <span class="icon">★</span>
    </label>
</div>

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Вы можете найти родительский индекс <label>, используя .closest("label").index().Затем используйте селектор :lt() , чтобы захватить каждый элемент перед ним. 

const highlightPrevious = (elem) => {
  let $this = $(elem);
  $(".rating-selector label span").css("color", "");                 //reset styling
  let idx = $this.index();                                           //get index of selected label
  $(`.rating-selector label:lt(${idx+1}) span`).css("color", "red"); //style all label spans up to and including the selected index
};

$('label')
  .click(function() { highlightPrevious(this); })
  .mouseover(function() { $(this).click() });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating-selector">
  <label>
    <input type="radio" name="rating" value="1" />
    <span class="icon">★</span>
  </label>
  <label>
    <input type="radio" name="rating" value="2" />
    <span class="icon">★</span>
    <span class="icon">★</span>
  </label>
  <label>
    <input type="radio" name="rating" value="3" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>   
  </label>
  <label>
    <input type="radio" name="rating" value="4" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
  </label>
  <label>
    <input type="radio" name="rating" value="5" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
  </label>
</div>
0 голосов
/ 10 июля 2019

Существует более простое решение для чистого CSS: 

.rating-selector {
  display: inline-block;
  border: 0;
  direction: rtl;
}

input[name="rating"] {
  display: none;
}

input[name="rating"]~label {
  color: grey
}

input[name="rating"]:checked~label {
  color: gold
}
<fieldset class="rating-selector">
  <input type="radio" name="rating" value="5" id="rating-5" />
  <label for="rating-5">★</label>
  <input type="radio" name="rating" value="4" id="rating-4" />
  <label for="rating-4">★</label>
  <input type="radio" name="rating" value="3" id="rating-3" />
  <label for="rating-3">★</label>
  <input type="radio" name="rating" value="2" id="rating-2" />
  <label for="rating-2">★</label>
  <input type="radio" name="rating" value="1" id="rating-1" />
  <label for="rating-1">★</label>
</fieldset>
...