弹出窗口 window 始终显示相同的数据

Question

我实现了一个在用户单击按钮时显示产品详细信息的弹出窗口，因此弹出窗口应该针对不同的产品显示不同的详细信息。

但是无论点击哪个按钮，弹出窗口总是显示最后一个产品的详细信息。为什么会这样？

CSS:

.cards {
    overflow: auto;
    white-space: nowrap;
    margin-top: 10px;
}

.options a {
    margin-left: 10px;
    text-decoration: none;
}

.card {
    display: inline-block;
    margin: 5px;
    height: 200px;
}

.bgimg {
    height: 410px;
}

.scm a {
    text-decoration: none;
}

.fb:hover {
    color: #4267B2
}

.insta:hover {
    color: #FD1D1D;
}

.gm:hover {
    color: #B23121;
}

.centring {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-hide {
    position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
    display: none;
}

.popup-show {
    position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
    display: block;
}

JS:

function showpopup(params) {
    var card = document.getElementsByClassName('card');
    var popup;
    for (let j = 0; j < card.length; j++) {

        popup = document.getElementsByClassName('popup')[j];
        popup.style.display = 'block';
    }
}
function hidepopup(params) {
    var card = document.getElementsByClassName('card');
    var popup;
    for (let i = 0; i < card.length; i++) {

        popup = document.getElementsByClassName('popup')[i];
        popup.style.display = 'none';
    }

}

HTML:

<div class="container-full" id="container">
    <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
            <img class="card-img-top" src="1.jpg" alt="Card image">
            <div class="card-body">
                <button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
            </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
            <img class="card-img-top" src="2.jpg" alt="Card image">
            <div class="card-body">
                <button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
            </div>
        </div>

    </div>
    <div class="product-popups">
        <div class="popup-hide popup" id="popup">
            <button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">&times;</button>
            <hr>
            <div class="row">
                <div class="col-sm-4">

                    <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
                </div>
                <div class="col-sm-8">

                    price:200DA <br>
                    <br><br>
                </div>
            </div>

        </div>
        <div class="popup-hide popup" id="popup">
            <button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">&times;</button>
            <hr>
            <div class="row">
                <div class="col-sm-4">

                    <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
                </div>
                <div class="col-sm-8">

                    price:300DA <br>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam
                    quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo
                    modi reprehenderit bea
                    tae. Dolorum?
                    <br><br>
                </div>
            </div>

        </div>

    </div>
</div>
</div>

有什么解决问题的建议吗？

Answer 1

你的代码有一些错误：

首先：您将“params”定义为函数的参数，但您没有使用它。

其次：您的 html 代码中有一些标签具有相同的 ID，我们对多个标签使用相同的 ID 不是有效的“html”

第三：只显示最后一个弹出窗口的原因是您在函数中使用了“for-loop”，这意味着通过单击每个“按钮”，代码循环抛出所有标签 class，最后显示最后一个。你不需要“for-loop”。您可以使用函数的“params”参数并将 id 提供给弹出窗口 windows，就像我将要使用的代码 post:

function showpopup(params) {
        var card= document.getElementsByClassName('card');
        var popup;
//        for (let j = 0; j < card.length; j++) {
        
        popup=document.getElementById(params);
        popup.style.display='block';
//        }
        
        

      }
      function hidepopup(params) {
        var card= document.getElementsByClassName('card');
        var popup;
        
        
        popup=document.getElementById(params);       
        popup.style.display= 'none';


      }

.cards {overflow: auto;white-space: nowrap;margin-top: 10px;}
    .options a {margin-left: 10px;text-decoration: none;}
    .card {display: inline-block;margin: 5px; height: 200px ;}
    .bgimg {height:410px;}
    .scm a {text-decoration: none;}
    .fb:hover {color:#4267B2}
    .insta:hover {color: #FD1D1D;}
    .gm:hover {color: #B23121;}
    .centring {margin: auto; display: flex;justify-content: center; align-items: center;}
    
    .popup-hide { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
  display: none;}
    .popup-show { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color:white;   
    width: 800px;
    max-width: 80%;
   display: block;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pop-up</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <div class="container-full" id="container">
      <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="1.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup" onclick="showpopup('pop1')">Open</button>
          </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="2.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup" onclick="showpopup('pop2')">Open</button>
          </div>
        </div>
      
      </div>
      <div class="product-popups">
        <div class="popup-hide" id="pop1"> 
          <button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop1')">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:200DA <br>
              <br><br>
            </div>
          </div>
        
        </div>
        <div class="popup-hide" id="pop2"> 
          <button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop2')">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:300DA <br>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam 
              quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo modi reprehenderit bea
              tae. Dolorum?
              <br><br>
            </div>
          </div>
        
        </div>
        
        </div>
      </div>

    <script src="javascript.js"></script>
</body>
</html>

Answer 2

我完全更改了您的 javascript 代码，希望这对您来说不是很重要。该逻辑使用 forEach() 方法。此外，我从 html 结构中删除了对函数的调用。

var popup = document.querySelectorAll('.popup');
var btn = document.querySelectorAll('.card-body button');
var btn_close = document.querySelectorAll('.popup-hide.popup button');
        
Array.from(btn).forEach(function(btnArray, i) {
btnArray.addEventListener('click', function() {
    popup[i].style.display = 'block';  
  });
});

Array.from(btn_close).forEach(function(btn_closeArray, i) {
btn_closeArray.addEventListener('click', function() {
    popup[i].style.display = 'none';  
  });
});

.cards {overflow: auto;white-space: nowrap;margin-top: 10px;}
    .options a {margin-left: 10px;text-decoration: none;}
    .card {display: inline-block;margin: 5px; height: 200px ;}
    .bgimg {height:410px;}
    .scm a {text-decoration: none;}
    .fb:hover {color:#4267B2}
    .insta:hover {color: #FD1D1D;}
    .gm:hover {color: #B23121;}
    .centring {margin: auto; display: flex;justify-content: center; align-items: center;}
    
    .popup-hide { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 800px;
    max-width: 80%;
  display: none;}
    .popup-show { position: fixed;
    padding: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    transition: 100ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color:white;   
    width: 800px;
    max-width: 80%;
   display: block;}

<div class="container-full" id="container">
      <div class="product-cards">
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="1.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup">Open</button>
          </div>
        </div>
        <div class="card" style="width:250px;height: 200px;">
          <img class="card-img-top" src="2.jpg" alt="Card image">
          <div class="card-body">
            <button class="btn btn-primary" id="showpopup">Open</button>
          </div>
        </div>
      
      </div>
      
      
      <div class="product-popups">
      
      
      
        <div class="popup-hide popup" id="popup"> 
          <button class="btn btn-primary" id="hidepopup">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:200DA <br>
              <br><br>
            </div>
         </div>
        
        </div>
        
        
        
        <div class="popup-hide popup" id="popup"> 
          <button class="btn btn-primary" id="hidepopup">&times;</button>
          <hr>
          <div class="row">
            <div class="col-sm-4">
             
              <img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
            </div>
            <div class="col-sm-8">
              
              price:300DA <br>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam 
              quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo modi reprehenderit bea
              tae. Dolorum?
              <br><br>
            </div>
          </div>
        
        </div>
        
        </div>
      </div>

弹出窗口 window 始终显示相同的数据

the popup window is always displaying the same data

html

javascript

css

popup