динамически добавлять изображение SRC с помощью JavaScript

Question

динамически добавлять изображение SRC с помощью JavaScript

0

Я пытаюсь добавить изображение src в изображение в div по щелчку эскиза. Проблема заключается в том, что изображение src не изменяется при щелчке другого элемента.

Код HTML:

  <a class="thumbnail" href="#" >
     <img  src="img1">
     <img  src="img2">
     <img  src="img3">
  </a>



 <div  class="imageforthumb">
    <img class="imageforthumbs">
 </div>

Использование Javascript:

$('.thumbnail').click(function () {
var images = $('.thumbnail img').attr('src');
$(".imageforthumbs").attr('src', images)
});

как только я щелкнул первое изображение img1, он установлен на img1 и не меняет img2, когда я нажимаю миниатюру. Пожалуйста, советую, что здесь может быть неправильно?

user3541362 16 апр. 2014, в 16:03

Источник

Теги:

javascript

jquery

html

css

3 ответа

3

С этой строкой:

var images = $('.thumbnail img').attr('src');

Вы всегда получаете первое изображение src.

Измените свой код на:

$('.thumbnail img').click(function () {
    var images = $(this).attr('src');
    $(".imageforthumbs").attr('src', images)
});

Пример: http://jsfiddle.net/8hTrr/

Edit: Как указано, вам не нужно jQuery, чтобы получить attr, вам просто нужно:

$('.thumbnail img').click(function () {
     $(".imageforthumbs").attr('src', this.src)
});

Обновленный пример: http://jsfiddle.net/8hTrr/1/

Jamiec 16 апр. 2014, в 11:18

1

Почему $(this).attr('src') над this.src ?
Paul S. 16 апр. 2014, в 13:29
0

Вы правильно поняли :) красиво и чисто
Aldren Terante 16 апр. 2014, в 13:53

0

Делегируйте событие на каждое изображение в теге <a></a>. Затем привяжите src щелкнутого <img/>.

$('.thumbnail').on('click', 'img', function () {
    $(".imageforthumbs")[0].src = this.src;
});

War10ck 16 апр. 2014, в 11:31

Ещё вопросы

Вы правильно поняли :) красиво и чисто

collapsar · Accepted Answer · 2014-04-16T10-44-00.000Z

ваш js-код неверен. пытаться

$('.thumbnail').click(function (eve) {
    $(".imageforthumbs").attr('src', $(eve.target).attr('src'));
});

ха, другое состояние гонки ;-). если это решение отвечает вашим потребностям, примите концептуально идентичный ответ Jamiec, который был представлен за несколько минут до меня.
Большое спасибо. Это работает с небольшим добавлением 'img' перед .thumbnail $ ('. Thumbnail img'). Click (function () {$ (". Imageforthumbs"). Attr ('src', $ (this) .attr ( 'src'));});