Question

我希望将点击的项目的图像源传递到另一个项目的div中。例如，在以下标记中：

<div class="row">
  <div id="header">
    <img src='placeholder' />
  </div>
</div>
<!--row-->

<div class="thumb-wrapper row">
  <div class="thumb">
    <div class="thumb-content">
      <img src="http://static.srcdn.com/slir/w700-h350-q90-c700:350/wp-content/uploads/hulk-mark-ruffalo-marvel-phase-3-movies.jpg" />
    </div>
  </div>


  <div class="thumb">
    <div class="thumb-content">
      <img src="https://pmcvariety.files.wordpress.com/2015/02/spider-mannew.jpeg?w=670&h=377&crop=1" />
    </div>
  </div>
</div>

我希望用户将标题中的图像源更改为src在点击的拇指的拇指内容div中的任何图像。

我已经让它在单个拇指的基础上工作，但我不确定如何让它适用于许多拇指：

$('.thumb ').on('click', function(e) {
  $("#header img").attr("src", "http://placekitten.com/1200/800");
});

此处的另一个因素是，该功能需要专门针对拇指内容 div中的图像，因为拇指 div中可能还有另一个图像。

欣赏任何指示或帮助。

Answer 1

根据点击的元素检索子src元素的img属性：

$('.thumb').on('click', function(e) {
  var src = $(this).find('.thumb-content img').attr('src');
  $("#header img").attr("src", src);
});

您可以简化代码并将事件监听器附加到img元素：

$('.thumb img').on('click', function(e) {
  $("#header img").attr("src", this.src);
});

Answer 2

使用子选择器怎么样？

$('.thumb-content>img').click(function(e) {
    console.log('thumb clicked');
    $("#header>img").attr("src", $(this).attr("src"));
 });

Answer 3

你走了：

$("#header img").attr("src", $(this).find('img').attr("src"));

Answer 4

尝试：

$('.thumb img').on('click', function(){
    $('header img').remove();
    $(this).clone().appendTo('header');
});

jQuery |在点击时将一个div的嵌套图像src与另一个div的嵌套图像源交换

4 个答案: