Выбрать и отменить выбор в Laravel и Javascript - PullRequest
Новая
       4

Выбрать и отменить выбор в Laravel и Javascript

0 голосов
/ 09 июля 2020

Я создаю функцию, которая позволяет пользователю выбирать и отменять выбор нескольких продуктов с помощью Javascript. Проблема в том, что он показывает только один флажок вместо каждого продукта, чтобы иметь свой флажок. Если у меня 20 продуктов, он показывает 1 флажок для первого продукта, как я могу это исправить?

Blade-файл 

<span><a class="Select-Deselect" href="">Select</a></span>

   @foreach($products as $product)
    <div id="checkBox1" style=" display:none; position:absolute;">
       <h1>hello</h1>
     </div>
  @endforeach

Javascript

    <script>
    /* Select deselect */
    $(".Select-Deselect").click(function(e) {
if ($(this).html() == "Select") {
    document.getElementById("checkBox1").style.display="block";
    $(this).html('Deselect');


}
else {
    $(this).html('Select');
    document.getElementById("checkBox1").style.display="none";
}
return false;
});
</script>

1 Ответ

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

В вашем l oop вы снова создаете несколько div с одним и тем же атрибутом id. Удалите атрибут id и используйте вместо него class, как сказано, атрибуты id должны быть уникальными в документе.

Измените <a>, чтобы выбрать / отменить выбор на кнопку, что более подходит :

Поскольку вы уже используете jQuery в своем скрипте, я также использовал его для переключения стиля display элементов.

Я удалил id="checkBox1" и заменил его на class="checkbox-container". Использование класса позволяет выбрать более одного элемента, что и делает $(".checkbox-container").

Вот рабочий пример:

blade: 

<button class="Select-Deselect" type="button">Select</button>

@foreach($products as $product)
<div class="checkbox-container" style="display:none;">
  <h1>hello</h1>
</div>
@endforeach

jQuery: 

<script>
$(".Select-Deselect").click( function(e) {
  if ($(this).html() == "Select") {
    $(".checkbox-container").css('display', 'block');
    $(this).html('Deselect');
  } else {
    $(".checkbox-container").css('display', 'none');
    $(this).html('Select');
  }
  return false;
});
</script>
...