如何为懒惰图像更改动态数据-src?

时间:2016-10-21 13:01:32

标签: javascript jquery html css

我有悬停列表框,我的列表框有一些链接,如果我访问链接列表框的主图像正在改变相关图像但我使用延迟加载插件,这就是为什么我想用{{更改1}}不是data-src但它没有工作我怎么能处理动态?

还有一件事,我猜它可能是我不知道的机器人。如果我离开区域,我的图像必须随默认图像改变,但我不能

我的主要结构

HTML

src

和JS

      <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-->

如果你悬停图片,你会看到链接,如果你访问链接图像已经改变 and you can see the demo

1 个答案:

答案 0 :(得分:1)

变化

$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);

$(this).parents(".tur-list-box").find("figure img").data("src",getAttr);

更多关于data