Javascript仅在循环中第一次工作答案

【问题标题】：Javascript is working only first time in the loopJavascript仅在循环中第一次工作
【发布时间】：2020-11-02 17:45:36
【问题描述】：

我在 laravel 刀片中有这个 foreach 循环。它只产生一次并在点击时提供特定的 CSS，在第二次点击时删除这些 CSS 样式。但在填充的其余数据上，它应用 CSS 但不删除。

@foreach($campaigns as $campaign)

        <div id="opac" class="row d-flex border-bottom border-secondary mt-4" style="color:white">
            <div class="col-5 col-md-2 mb-4">

                <div class="d-flex">
                    <div class="ml-2">
                        
                        <span id="artist_name" class="text-muted" style="font-family:Arial, Helvetica, sans-serif"">{{$campaign->artist_name}}</span> <br>
                        
                    </div>
                </div>
            </div>
    @endforeach

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

    $(document).ready(function() {
        $("#opac").click(function() {
            //Check to see if background color is set or if it's set to white.
            if (this.style.background == "") {
                $(this).css('background', 'rgba(255, 255, 255, 0.1)');
                $(this).css('padding-top', '15px');
            } else {
                $(this).css('background', '');
                $(this).css('padding-top', '15px');
            }
        });
    });

</script>

【问题讨论】：

在 HTML 中，ids 在 DOM 中应该是唯一的 - 因为 #opac 每次循环迭代都存在，所以您的 HTML 无效 - 也许尝试将其更改为类？（即.opac）
是的，我试过了。它是一样的。当我尝试选择另一个时，它会选择其他但不会取消选择它们
请同时确保JS位于页面底部（或至少在模板渲染后）
是的，它在页面底部
如果你想选择和取消选择，那么切换不是更好的选择

标签： javascript laravel

【解决方案1】：

您的模板存在一些问题

ID 应该是唯一的，如果您有多个 #opac，那么您应该真正使用一个类（即 .opac）
您的<span> 标签（在艺术家姓名、模板中）末尾有一个额外的双引号（需要删除它
第一个 <div> 没有关闭标签，因此您的模板不是有效的 HTML

一旦你解决了这些问题，你可能会得到一些工作。

请注意，您正在更改单击顶部的填充（不知道为什么），并且您的背景是白色的，同时也以白色文本颜色开头（在您声明的第一个 div 上：style="color:white"）基本上给您白色白色。

还有一件事，您可以切换从元素中添加/删除的类，而不是更改属性

请看下面的演示

$(document).ready(function() {
  $(".opac").click(function() {
    //Check to see if background color is set or if it's set to white.
    this.classList.toggle('gray');
    
    console.log(this.style.background);
    $(this).css('padding-top', '15px');
  });
});

.white{
  background: rgba(255, 255, 255, 0.1);
}

.gray{
  background: rgba(0, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="opac row d-flex border-bottom border-secondary mt-4" style="color: red">
  <div class="col-5 col-md-2 mb-4">

    <div class="d-flex">
      <div class="ml-2">

        <span id="artist_name" class="text-muted" style="font-family:Arial, Helvetica, sans-serif">
        artist name
        </span>
        <br/>
      </div>
    </div>
  </div>
</div>
<div class="opac row d-flex border-bottom border-secondary mt-4" style="color:red">
  <div class="col-5 col-md-2 mb-4">

    <div class="d-flex">
      <div class="ml-2">

        <span id="artist_name" class="text-muted" style="font-family:Arial, Helvetica, sans-serif">
        artist name 2
        </span>
        <br/>
      </div>
    </div>
  </div>
</div>

<div class="row opac d-flex border-bottom border-secondary mt-4" style="color:red">
  <div class="col-5 col-md-2 mb-4">

    <div class="d-flex">
      <div class="ml-2">

        <span id="artist_name" class="text-muted" style="font-family:Arial, Helvetica, sans-serif">
        artist name3
        </span>
        <br/>
      </div>
    </div>
  </div>
</div>

【讨论】：