Блог

Главная - Вопросы по программированию - HTML изменить фон переключателя

HTML изменить фон переключателя

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я бы хотел, чтобы цвет фона оставался таким же <ul> , как у lightgray.

В настоящее время при нажатии на переключатель фон ul изменяется неправильно. Я не знаю, как сделать цикл скрипта jquery через все доступные ul, я был бы очень признателен, если скрипт может быть небольшим, поскольку эта концепция будет применена к 100 ul

 $(document).ready(function() {
   $("ul.options-list li").on("click",function() {
            if($(this).find('input[type="radio"]').is(':checked')) { 
          $('ul.options-list li').removeClass('change_color');
          $(this).addClass('change_color');
        }
    });
}); 
 ul.options-list li.change_color{
        background-color: lightgray;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Q1
  <ul class="options-list">
    <li>
        <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
    </li>
    <li>
        <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
    </li>
  </ul>
</div>


<div>
  Q2
  <ul class="options-list">
    <li>
        <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
    </li>
    <li>
        <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
    </li>
  </ul>
</div>

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

1. Я хотел бы добавить, что я мог бы достичь своей цели, повторив X количество css / javascript выше, но это действительно выглядело бы некрасиво, но при необходимости это то, что я должен сделать.

2. Используйте $('ul.options-list li').each(function(){ }) для циклического перебрасывания li s. однако я бы рекомендовал использовать переменную для хранения текущего выбранного li , тогда вам не нужно будет перебирать все li s.

Ответ №1:

Вы можете ul li выполнить цикл использования each , а затем использовать $(this) , чтобы проверить, проверено ли радио в зависимости от этого add или remove вашего класса.

Демонстрационный код :

 $(document).ready(function() {
  $("ul.options-list li").on("click", function() {
  //loop through ul li 
    $("ul.options-list li").each(function() {
      if ($(this).find('input[type="radio"]').is(':checked')) {
        $(this).addClass('change_color');//add change_Color
      } else {
        $(this).removeClass('change_color');//remove same
      }
    })
  });
}); 
 ul.options-list li.change_color {
  background-color: lightgray;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Q1
  <ul class="options-list">
    <li>
      <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
    </li>
    <li>
      <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
    </li>
  </ul>
</div>


<div>
  Q2
  <ul class="options-list">
    <li>
      <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
    </li>
    <li>
      <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
    </li>
  </ul>
</div>

Ответ №2:

Я не силен в javascript.

но, может быть, присвоить всем вашим переключателям один и тот же класс и добавить что-то вроде этого

document.getElementByClass(«myCheck»).checked = true;

а затем добавьте CLASS(‘change_color’) к выбранным.

https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Метки: