时间戳

首页 > 解决方案 > Javascript仅在循环中第一次工作

javascript - Javascript仅在循环中第一次工作

问题描述

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

标签： javascriptlaravel

解决方案

您的模板有一些问题

  1. ID应该是唯一的，如果你有多个，#opac那么你应该真正使用一个类（即.opac）
  2. 您的<span>标签（在艺术家姓名，模板中）末尾有一个额外的双引号（需要删除它
  3. 第一个没有关闭选项卡，<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>

推荐阅读