时间戳

首页 > 解决方案 > 在 Laravel 和 Javascript 中选择和取消选择

javascript - 在 Laravel 和 Javascript 中选择和取消选择

问题描述

我正在创建一个允许用户使用 Javascript 选择和取消选择多个产品的函数，问题是它只显示一个复选框而不是每个产品都有其复选框。如果我有 20 个产品，它会为第一个产品显示 1 个复选框，我怎样才能解决这个问题？

刀片文件

<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>

标签： javascriptlaravellaravel-5

解决方案

在您的循环中，您再次创建具有相同id属性的多个 div。删除id属性并使用 aclass代替，如上所述，id属性在文档中必须是唯一的。

<a>将您的选择/取消选择更改为一个按钮，这更合适：

由于您已经在脚本中使用了 jQuery，我还使用它来切换display元素的样式。

我删除了id="checkBox1"并将其替换为class="checkbox-container". 使用一个类可以选择多个元素，就是$(".checkbox-container")这样。

这是一个工作示例：

刀：

<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>

推荐阅读