Question

当点击图像（用作链接）时，我正在尝试替换div“info”中的某些文本。我只是不确定哪种方法可以做到这一点。我宁愿这是jquery。

到目前为止我的代码看起来像：

<div class="info">
<p>I would like this text replaced</p>
<script>
</script>
</div><!--end info-->


<li><a href="1.jpg"><img src="1-s.png" width="55" height="55" alt="" class="latest_img" /></a><p>Replace the div "info" text with the text here when clicked on</p></li>

Answer 1

我认为这就是你所追求的：

$(function() {
  $("li a").click(function() {
    $("div.info p").text($(this).next().text());
    return false;
  });
});

这样可以在点击时提供更多的灵活性，同时注意你需要将点击处理程序包装在document.ready函数中，就像我上面一样...这样它等待DOM准备绑定，一次它应该绑定的元素是准备就绪的。

Answer 2

这样的事情应该可以胜任：

$(function() {
  $("a:has(img.latest_img)").click(function() {
    $("div.info p").text($(this).next().text());
    return false;
  });
});

让我解释它是如何运作的。

不幸的是，锚没有类或ID，但您仍可以使用a:has(img.latest_img)找到它，这意味着所有具有后代图像的锚点都具有“latest_img”类。

可以找到相关段落，并将其文本替换为$("div.info p").text()。

可以通过多种方式找到替换它的文本。我最简单的选择$(this).next()来获取它的引用。您可以轻松地执行$(this).closest("li").children("p")或任意数量的其他选择器。 注意： this在事件处理程序中引用事件的来源。

最后，click处理程序返回false以停止事件传播。否则，锚点会将浏览器导航到1.jpg（href属性）。

单击图像时替换div中的文本

2 个答案: