[英]How to target html 5 attribute “data-src” and replace with “src” with jQuery?
[英]How to get data-src attribute with jquery?
其实我想做的当我悬停在第一张图片上时必须再次出现我想和你分享我的结构
<div class="tur-list-box">
<div class="tur-list-content">
<figure>
<img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
<a href="#" class="figure-overlay">
<p class="tour-price">
<span class="price-big">73,</span>
<span class="price-little">40</span>
<span class="price-unit">TL*</span>
<span class="price-block">‘den itibaren</span>
</p>
</a>
</figure><!-- tur resim-->
<div class="tur-details">
<h3><a href="#">Hafta Sonu Turları</a></h3>
<p>15 farklı program</p>
<i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
</div><!-- tur detay-->
</div><!-- tur list content-->
<div class="tur-list-toggle">
<ul class="list-unstyled">
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_adana-portakal-cicegi-karnavali_3eO46CjOg4k34ooQM2mA.jpg">Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_Ue7lCTZhtuNk6DHTOy5C.jpg">Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-03/tur_manisa-mesir-macunu-senligi-turu_ElEY2IdzFOfHLe6do7ja.jpg">Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/normal/2016-01/tur_isparta-goller-yoresi-gul-hasadi-turu_KN8aDpGyF4O6gKABF5d4.jpg">Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
</ul>
</div><!-- acilir kapanir alan-->
</div><!-- tur list box-->
<script>
$(".tur-list-box").hover(
function(){
$(this).find(".tur-list-toggle").stop().slideDown();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
},
function(){
var getDefaultImg = $(this).find("figure img").data(".lazy");
console.log(getDefaultImg);
$(this).find(".tur-list-toggle").stop().slideUp();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
}
);
$('.tur-list-toggle ul li a').hover(
function(e) {
e.preventDefault();
var getAttr = $(this).attr("data-img");
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
},
function(e) {
}
);
</script>
顺便说一句,如果您在检查元素上看不到data-src
,请尝试查看源代码(对于 chrome,ctrl+U)
$(this).attr("data-src")
您可以查看此链接以获取更多信息如何获取 data-id 属性?
$(selector).data("src")
将获取 data-src 属性的值
您可以尝试使用以下行:
var getDefaultImg = $(this).find("figure img").data("src");
更多关于数据函数的信息: https : //api.jquery.com/data/
您实际上想要获取src
而不是data-src
属性,以便在悬停后找到图像的来源,正如您的代码所示,所以它是var getDefaultImg = $(this).find("figure img").attr("src");
.
这是因为懒加载图像插件,您使用,取代了data-src
与src
一个当图像完成加载。
例如(取自插件的演示)
<!--image 6 load is complete-->
<img class="lazy img-responsive" src="images/6.jpg?t=1477297898" style="display: block;">
<!--image 7 not loaded yet-->
<img class="lazy img-responsive" data-src="images/7.jpg?t=1477297898" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.