Question

一个相当简单的遍历，我似乎无法弄明白......

基本上如果有人点击<li>并且我想更改第一个div中的图像，我该怎么做呢？尝试了一些事情，包括：

$(this).closest('.currentImage img')

<div class="imageSlider">
    <div class="currentImage">
        <img src="LP5/lp5_1.png"/>
    </div>
    <ul class="thumbnails">
        <li><img src="LP5/lp5_1.png"/></li>
        <li><img src="LP5/lp5_2.png"/></li>
        <li><img src="LP5/lp5_3.png"/></li>
        <li><img src="LP5/lp5_4.png"/></li>
        <li><img src="LP5/lp5_5.png"/></li>
    </ul>
</div>

Jquery的

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).closest('.currentImage img');
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
 });

Answer 1

Fiddle

尝试找到父.imageSlider元素，然后找到其子.currentImage元素。

$('.thumbnails li').click(function(e){
    e.preventDefault();
    var newImage = $(this).children('img').attr('src');
    var $image = $(this).parents('.imageSlider').find('.currentImage img');
    console.log(newImage);
    $image.fadeOut(500, function() {
        $image.attr('src', newImage);
    }).fadeIn(500);
});

另一个选项是$(this).parent('ul').siblings('.currentImage').find('img')。

Answer 2

那个选择器并不完全正确。 .currentImage是当前元素的父级（即.thumbnails）的兄弟，因此closest()永远不会找到它。

遍历DOM Tree jquery

2 个答案: