Как добавить css с установленным флажком для соответствующего диапазона? - PullRequest
Новая
       0

Как добавить css с установленным флажком для соответствующего диапазона?

2 голосов
/ 08 мая 2020

Я хочу добавить класс в связанный диапазон при флажке, установленном с помощью следующего кода. на самом деле я хочу добавить «текст-украшение-строку», «сквозную строку» к связанному диапазону флажков.

Но теперь, когда я нажимаю на первый флажок, css применяется ко всем промежуткам, как показано в коде. 

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    if (this.checked) {
      $(".label-text").css("text-decoration-line", "line-through");
    } else {
      $(".label-text").css("text-decoration-line", "none");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Task list and assignments</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Set due date and assignments</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Remove duplicate tasks and stories</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Update the userflow and stories</span>
    </label>
  </div>
  <div class="d-flex align-items-center">
    <label>
    <input type="checkbox" class="option-input radio">
    <span class="label-text">Adjust the components</span>
    </label>
  </div>
</div>

Ответы [ 6 ]

2 голосов
/ 08 мая 2020

Вы можете использовать .next(), чтобы получить следующий элемент, проблема заключалась в том, что вы выполняете выбор в классе, который применяет CSS ко всем элементам, вот как вы можете это сделать: 

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    $(this).next().css("text-decoration-line", this.checked ? "line-through" : "none" );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div>
</div>
2 голосов
/ 08 мая 2020

, потому что вы установили все .label-text. вы должны установить тот, который будет следующим входом 

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
   
    if (this.checked) {
      $(this).next(".label-text").css("text-decoration-line", "line-through");
    } else {
       $(this).next(".label-text").css("text-decoration-line", "none");
    }

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div>
</div>
1 голос
/ 08 мая 2020

Прямо сейчас $(".label-text") будет выбирать каждый элемент, соответствующий этому классу. Поэтому, когда this.checked истинно, все флажки будут обновлены.

Вместо этого попробуйте использовать find вместе с parent. 

$(document).ready(function() {
  $('input[type=checkbox]').change(function() {
    if (this.checked) {
      $(this).parent().find(".label-text").css("text-decoration-line", "line-through");
    } else {
      $(this).parent().find(".label-text").css("text-decoration-line", "none");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Adjust the components</span></label></div>
</div>
0 голосов
/ 08 мая 2020

Есть отзывы о реализации:

  1. С классом css проще организовать стиль. В этом примере я создаю option-label__checked для хранения стиля text-decoration-line.
  2. Мы можем использовать делегирование события вызова техники, чтобы иметь один дескриптор события для обслуживания нескольких элементов управления UI. Поскольку вы используете jQuery, этот метод реализуется .on (events [, selector] [, data], handler) . Я прикрепляю дескриптор к .p-3 и слушаю событие change, исходящее от элемента input. Это становится удобно, когда элементы управления добавляются динамически. Это также помогает с точки зрения производительности
  3. Причина, по которой ваш образец не работает, потому что вы применяете line-through ко всем .label-text сразу.
  4. .toggleClass( className, state ) секунда paramter позволяет использовать логическое значение для включения или выключения класса, идеально соответствует статусу флажка. И оператор находится в одной строке. 

$(document).ready(function() {
  $('.p-3').on('change', 'input[type=checkbox]', function() {
    $(this).parent().toggleClass('option-label__checked', this.checked);

  });

});
.option-label__checked {
  text-decoration-line: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Set due date and assignments</label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Remove duplicate tasks and stories</label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Update the userflow and stories</label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio">&nbsp;Adjust the components</label></div>
</div>
0 голосов
/ 08 мая 2020

HTML: 

<div class="p-3 bg-white">
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span class="label-text">Task list and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Set due date and assignments</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Remove duplicate tasks and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Update the userflow and stories</span></label></div>
  <div class="d-flex align-items-center"><label><input type="checkbox" class="option-input radio"><span> Adjust the components</span></label></div>
</div>

JQUERY: 

$(document).ready(function() {
   $('input[type=checkbox]').change(function() {
        $this = $(this);
        if (this.checked) {
          $this.next('span').css('text-decoration-line','line-through');
        } else {
          console.log('un-clicked');
          $this.next('span').css("text-decoration-line", "none");
        }
   });
});

Вы должны добавить тег <span> к каждому тексту или предложению, чтобы применить класс или css.

0 голосов
/ 08 мая 2020

Я сделал небольшие изменения в html. Итак, согласно моему предположению, измененному, как показано ниже,

HTML: 

 $(document).ready(function() {
    $('input[type=checkbox]').change(function() {
        if (this.checked) {
            $(this).next().addClass( "yourClass" ) // I assume you wanted to add class to text element 
            $(this).next().css("text-decoration-line", "line-through");// I assume you wanted to strike out the text on clicking checkboxes 

        } else {
            $(this).next().removeClass( "yourClass" )
            $(this).next().css("text-decoration-line", "none");
        }

    });
    });
.yourclass{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="p-3 bg-white">
    <div class="d-flex align-items-center">
        <label>
            <input type="checkbox" class="option-input radio">
            <span class="label-text">Task list and assignments</span>
        </label>
        </div>
    <div class="d-flex align-items-center">
        <label>
            <input type="checkbox" class="option-input radio">
            <span>&nbsp;Set due date and assignments<span>
        </label>
    </div>
    <div class="d-flex align-items-center">
        <label>
            <input type="checkbox" class="option-input radio">
            <span>&nbsp;Remove duplicate tasks and stories<span>
        </label>
    </div>
    <div class="d-flex align-items-center">
        <label>
            <input type="checkbox" class="option-input radio">
            <span>&nbsp;Update the userflow and stories<span>
        </label>
    </div>
    <div class="d-flex align-items-center">
        <label>
            <input type="checkbox" class="option-input radio">
            <span>&nbsp;Adjust the components<span>
        </label>
    </div>
    </div>

jquery: 

$(document).ready(function() {
$('input[type=checkbox]').change(function() {
    if (this.checked) {
        $(this).next().addClass( "yourClass" ) // I assume you wanted to add class to text element 
        $(this).next().css("text-decoration-line", "line-through");// I assume you wanted to strike out the text on clicking checkboxes 

    } else {
        $(this).next().removeClass( "yourClass" )
        $(this).next().css("text-decoration-line", "none");
    }

});
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...