jQuery 弹出窗口仅在 foreach 循环中显示一次

Question

首先，让我解释一下弹出窗口的目的。我有一个来自产品数据库的列表，在一个 foreach 循环中。

现在我添加了代码，以便当您单击产品时，它会打开一个新框并显示有关该产品的内容。但由于某种原因，它只适用于第一个产品。

我会在这里发布代码，因为我不擅长 jQuery/Javascript。这是jquery脚本：

        function myFunction3() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }    

刀片

        <td>
                <div class="popup" onclick="myFunction3()">????️
                    <span class="popuptext" id="myPopup">
                      @if ($product->id!==3)
                      <img src="{{$product->path}}" alt="{{$product->name}}">
                      @else
                      <audio controls style="width: 95%">
                        <source src="\sounds\Pilishpilish.mp3" type="audio/mpeg">
                      Your browser does not support the audio element.
                      </audio>
                      @endif
                      </span>
                </div>
              </td>
        

css：

        .popup {
          position: relative;
          display: inline-block;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        
        
        .popup .popuptext {
          visibility: hidden;
          width: 160px;
          background-color: #555;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 8px 0;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: -120%;
          margin-left: -80px;
        }
        
       
        .popup .popuptext::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #555 transparent transparent transparent;
        }
        
    
        .popup .show {
          visibility: visible;
          -webkit-animation: fadeIn 1s;
          animation: fadeIn 1s;
        }
       
        @-webkit-keyframes fadeIn {
          from {opacity: 0;} 
          to {opacity: 1;}
        }
        
        @keyframes fadeIn {
          from {opacity: 0;}
          to {opacity:1 ;}
        }
             

我知道 ID 应该是唯一的，但我怎么能做到这一点

Answer 1

您可以将this 添加到onclick="myFunction3()"，例如onclick="myFunction3(this)"

然后使用

function myFunction3(obj) {
  var popup = obj.children[0];
  popup.classList.toggle("show");
}

现在您将点击的元素传递给myFunction3，然后您可以使用它来动态切换第一个孩子的类，也就是您的span

演示

var elements = document.getElementsByClassName("popup");

var myFunction = function() {
  var ele = this.children[0]
  ele.classList.toggle("show")
};

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', myFunction, false);
}

table {
  margin: 100px 0 0 100px
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: -120%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <div class="popup">?️
          <span class="popuptext">
                      <img src="{{$product->path}}" alt="{{$product->name}}" />
                      </span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="popup">?️
          <span class="popuptext">
                      <img src="{{$product->path}}" alt="{{$product->name}}" />
                      </span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

jQuery 解决方案：

$(".popup").click(function() {
  var popup = $(".popuptext", this);
  popup.toggleClass("show");
})