Замените img src на data-img

Я нашел это решение, и оно работает, но для этого требуется TweenLite.js.
Это какой-нибудь способ работать без TweenLite? и Сжатие кода?Замените img src на data-img

$.fn.loadImg = function() { 
 
    return this.each(function() { 
 
     var t = $(this), 
 
     e = t.data(), 
 
     i = e.img; 
 
     if (e.insert) {} else { 
 
     var r = { 
 
      backgroundImage: "url(" + i + ")" 
 
     }; 
 
     TweenLite.set(t, r); 
 
     } 
 
    }), this; 
 
}, (jQuery), 
 
$(function() { 
 
    $("[data-img]").loadImg(); 
 
});

Может кто-нибудь любезно сказать мне, что не так это с помощью следующего кода, изображения не отображаются!

$('figure data-img').each(function() { 
 
    this.src = $(this).data('src'); 
 
});

<figure data-img="photo1.jpg"> </figure> 
 
<figure data-img="photo2.jpg"> </figure> 
 
<figure data-img="photo3.jpg"> </figure>

источник

2015-04-12 Smarter X

Решение вы вывесили как редактировать совершенно ненужным, потому что правильные решения были размещены как ответы уже. Итак, да, это можно и нужно делать без TweenLite. – Ninjakannon

-1

$('figure').each(function() { 
$(this).attr('data-img','test.jpg'); 
}

источник

2015-04-12 15:59:26 odedta

Было бы неплохо добавить описание этого кода и объяснить, почему/как он решает вопрос –

Я думаю, что он говорит сам за себя ... даже для человека, у которого есть 0 знаний о кодировании. – odedta

На самом деле это не так. Человек с 0 знаниями кодирования может понять код и то, что он делает, но не поймет, как и почему вы это сделали (это описание необходимо). В переполнении стека вопросы/ответы только с кодом считаются сообщениями низкого качества, и они перечислены для проверки и удаления (вот как я нашел ваш ответ). –

Используйте функцию атр, чтобы изменить атрибут сНу тега:

$('figure data-img').each(function() { 
    this.src = $(this).data('src'); 
});

должен быть

$('figure data-img').each(function() { 
$(this).attr('data-img', 'src'); 
});

источник

2015-04-12 16:15:57

Есть два проблемы с вашим кодом. Существенно, что figure element не имеет атрибута src. Для отображения изображения необходимо, чтобы ваши элементы figure содержали элемент img. Во-вторых, ваш CSS-селектор должен быть только 'figure', вы не должны включать атрибут данных.

$('figure').each(function() { 
 
    $(this).html('<img src="' + $(this).data('src') + '">'); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<figure data-img="photo1.jpg"></figure> 
 
<figure data-img="photo2.jpg"></figure> 
 
<figure data-img="photo3.jpg"></figure>

Если есть другие figure элементы, которые вы не хотите, чтобы применить это, добавить класс к соответствующим элементам, чтобы ссылаться на их.

источник

2015-04-12 16:28:51 Ninjakannon

Я не думаю, что эта цифра тег имеет атрибут Src, так:

$("figure").each(function() 
 
{ 
 

 
    $("img",this).attr("src",$(this).data("img")); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<figure data-img="photo1.jpg"><img/> </figure> 
 
<figure data-img="photo2.jpg"><img/> </figure> 
 
<figure data-img="photo3.jpg"><img/> </figure>

источник

2015-04-12 16:35:02 RobertoNovelo

Замените img src на data-img

ответ

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