jquery - Jquery - fadeIn() 重复显示相同的图像
问题描述
我是这个论坛的新手,也许这个问题已经被问过了。但是,我仍然需要这个论坛受人尊敬的用户的帮助。让我分享我的(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>
解决方案
起初,不显示 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>
推荐阅读
- installation - 安装 AzerothCore 构建错误:ace.vcxproj、authserver.vcxproj、worldserver.vcxproj;跳过构建:clean_cotire,安装
- c++ - 定义转换构造函数和转换运算符时哪个优先,为什么编译器会对此转换有所不同?
- github - SSH 检查到 Github 解析到 Gitlab
- google-apps-script - 仅在提交谷歌表单后才允许从谷歌驱动器下载文件
- r - 在 R 代码中使用“caret”包中的 preProcess 的目的是什么?
- php - 'sql_mode' 不能设置为 aws ec2 windows 服务器中的 'NO_AUTO_CREATE_USER' 的值
- javascript - JS 对象的数组值和键中的引号不一致
- string - 在linux中如何替换文件中模式内的子模式
- python - 在python中的3D numpy数组中绘制三角形
- list - Haskell - 在序列中的下一个函数调用中使用先前计算的值