2016-10-24 3 views
2

На самом деле я хочу сделать, когда я зависать от первого изображения должно появиться снова я хочу поделиться с вами структуруКак получить атрибут data-src с 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> 

and I want to share with you demo link to see how to work

, кстати, если вы не можете увидеть data-src на инспектировать элемент попытаться проверить на исходный код (Ctrl + U для хрома)

+0

Возможный дубликат [Как получить атрибут данных ID?] (Http://stackoverflow.com/questions/5309926/how-to-get -the-data-id-attribute) – Andrew

+1

Пожалуйста, создайте * минимальную * версию, которая показывает вашу проблему - есть слишком много кода, который кажется совершенно неактуальным. Пожалуйста, прочтите это [mcve] –

+0

вот вы: http://codepen.io/cowardguy/pen/KgJxPy –

ответ

1

$ (это) .attr ("данные-Src")

Вы можете проверить эту ссылку для получения дополнительной информации How to get the data-id attribute?

+0

Я пробовал, но ничего не изменилось. –

+0

Попробуйте указать идентификатор вашего изображения, а затем $ ("# ifOfTheImage"). Data ('src'); – XYZ

+0

Я знаю, как получить идентификатор, но я просто хочу получить значение атрибута data-src, и если я заменю attr на данные, ничего не изменится –

2

Вы можете попробовать использовать следующую строку:

var getDefaultImg = $(this).find("figure img").data("src"); 

Подробнее о функции данных здесь: https://api.jquery.com/data/

+0

Да, но ничего не изменилось –

0

Вы действительно хотите получить src не data-src атрибут, чтобы найти источник изображения после наведения, как указывает код, так что это var getDefaultImg = $(this).find("figure img").attr("src");.

Это потому, что плагин с ленивыми изображениями загрузки, который вы используете, заменяет data-src на src, когда загрузка изображения завершается.

Например (взято из plugin's demo)

<!--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=="> 
+0

но если я получу src, это даст мне еще одно изображение?Кстати, у меня есть ссылки на нижнюю часть поля, и если наведите на них какие-либо ссылки, изображения, связанные с соответствующим изображением. –

+0

. Посмотрите эту демонстрацию, которую я написал, вот что я предлагаю: http://codepen.io/8odoros/pen/zKZLyL –

+0

No I понять, но я должен получить data-src не src. потому что src имеет placeholder.png, и если я hover.off, мое основное изображение должно быть по умолчанию –

Смежные вопросы