Question

我有一个可点击图片列表，每个图片都有隐藏的dl和相对内容：

<div class="thumbs">
    <ul>
        <li>
            <img src="tom" />
            <dl style="display: none;">
                <dd>Content 1</dd>
                <dd>Content 1</dd>
                <dd>Content1 </dd>
            </dl>
        </li>
        <li>
            <img src="dick" />
            <dl style="display: none;">
                <dd>Content 2</dd>
                <dd>Content 2</dd>
                <dd>Content 2</dd>
            </dl>
        </li>
        <li>
            <img src="harry" />
            <dl style="display: none;">
                <dd>Content 3</dd>
                <dd>Content 3</dd>
                <dd>Content 3</dd>
            </dl>
        </li>
    </ul>
</div>


<div class="panel">
<ul>
    <li>Content X</li>
    <li>Content X</li>
    <li>Content X</li>
</ul>   
</div>

对于每个单击的图像，我想获取其相邻的dl内容并使用它来替换.panel div中的ul内容。初步刺伤导致：

  $('.thumbs').delegate("img", "click", function(){
    $('.thumbs dl').each(function(idx) {
    $('.panel ul').html($(this));
    return false;
    });
  });

但是这会逐渐取代.panel的内容，从第一个dl的内容（tom）开始 - 忽略实际点击的img元素。我希望能够以任何顺序点击任何图像，并用该图像的相对dl替换面板的内容。

Answer 1

假设结构将始终如您在示例中所示，则以下内容将起作用：

$('.thumbs').delegate("img", "click", function(){
    $('.panel ul').html($(this).next().html());
});

您最初尝试的问题是您正在遍历dl中的所有.thumbs元素，并且您不会尝试仅查找相关的dl。

上面的解决方案使用next方法将DOM中的下一个元素转换为单击的元素（在示例中始终为dl），并替换{的HTML {1}}使用.panel ul的HTML。

这是一个有效的example。

如果结构可能发生变化，dl元素不会直接在dl之后，您可以将img函数中的行替换为：

delegate

Answer 2

试试这个 -

$('.thumbs').delegate("img", "click", function(){
     $('.panel ul').html(this.find('dl').html());
    return false;
    });
  });

将div的内容替换为动态列表中的隐藏内容

2 个答案: