Jquery - fadeIn（）重复显示相同的图像

Question

我是这个论坛的新人，也许这个问题已经被提出来了。但是，我仍然需要这个论坛的尊敬用户的帮助。让我分享一下我的（HTML n Jquery）编码......

jQuery的

      $(".container").click(function(){

        $(".product-view").fadeIn()
      });
      $(".close-button").click(function(){
        $(".product-view").fadeOut()
      });

  </script>

HTML

<div class = "container">
    <div class = "middle">
        <img src = "BLUE(Linen Shirt).jpg"> </div>
    <div class="on-top">
        <button class="qvbtn"><b>Quick View</b></button>
    </div>
</div>
<div class="product-view">
    <div class="close-button"> X </div>
    <div class="product-big-image">
        <img src="BLUE(Linen Shirt).jpg"> 
    </div>
    <div class="product-big-desc">
        <h2>Linen Shirt</h2>
        <h5>Produce Code:</h5> 
        <h5>Brand:</h5>
        <div class="price">
            <h4 class="OldPrice"><del>150 SAR</del>
                <sup>50% off</sup>
            </h4> <!--h4 class="NewPrice">75 SAR</h4-->
        </div>
    </div>
</div>

Answer 1

首先，不要显示div包含图像。单击按钮后显示它

 <div class="product-view" style="display: none">

 $("#btnClick").click(function(){
        $(".product-view").fadeIn()
    });
    $(".close-button").click(function(){
        $(".product-view").fadeOut()
    });

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

<div class = "container">
  <div class = "middle">
    <img src = "1g.jpg">
  </div>
  <div class="on-top">
    <button id="btnClick" class="qvbtn"><b>Quick View</b></button>
  </div>
</div>
<div class="product-view" style="display: none">
  <div class="close-button"> X </div>
  <div class="product-big-image">
    <img src="1.jpg" >
  </div>
  <div class="product-big-desc">
    <h2>Linen Shirt</h2>
    <h5>Produce Code:</h5>
    <h5>Brand:</h5>
    <div class="price">
      <h4 class="OldPrice"><del>150 SAR</del>
        <sup>50% off</sup>
      </h4> <!--h4 class="NewPrice">75 SAR</h4-->
    </div>
  </div>
</div>