Question

我想在点击链接时用另一张图片替换图像。我有三个图像，每个图像都转到一个特定的链接。因此，例如，链接1需要图像1，链接2图像2。等等... 我已经想出了如何进行替换：

  $(function() {
  $("a#t2").click(function() {
        $("#floatleft img").replaceWith('<img src="images/image1.jpg" />');
        });
  });

<div id="floatleft">
    <img src="images/about.jpg" />
</div>
<div id="content">
    <ul id="abouttabs">
    <li><a id="t1" href="#tab1"><img src="images/menu1.png" alt"menu1" /></a></li>
    <li><a id="t2" href="#tab2"><img src="images/menu2.png" alt"menu2" /></a></li>
    <li><a id="t3" href="#tab3"><img src="images/menu3.png" alt"menu3" /></a></li>
</ul>

因此，您可以看到我有三个标签，其中包含t1，t2和t3的ID。当单击相应的链接时，我想将t1替换为image1，将t2替换为image2，将t3替换为image3。我显然可以通过制作上述代码的三个函数来实现这一点，但我想知道是否有一种更简单的方法可以使用每个函数或其他东西。

显然，最好的方法是将图像放在div选项卡中，但我不能这样做，因为它滚动并在选项卡中显示图像也使其滚动。我想我可以让它滚动页面，但我不喜欢它看起来如何。所以我想我会尝试一个简单的jQuery解决方案......

Answer 1

试试这个：

<script type="text/javascript">
$(function() {
  $("#abouttabs li a").click(function() {
    var newImgSrc = "images/image_" + this.id + ".jpg";
    $("#floatleft img").attr("src", newImgSrc);
   });
});
 </script>

在jQuery处理程序中，this是对'触发'事件的DOM元素（不是jQuery对象！）的引用 - 因此它可以让你找出点击了哪个标签，你可以然后提取该选项卡的元素ID并相应地替换图像源。

如果需要，可以通过在处理程序的第一行（我们分配newImgSrc）中进行一些字符串/正则表达式替换来隔离元素ID的数字部分 - 但是将图像重命名为image_t1要容易得多.jpg，image_t2.jpg，image_t3.jpg。

Answer 2

给这一点。

$('#abouttabs').find('a').click(function()
{
    var item = this.parentNode;
    var index = 0;

    do
    {
        item = item.previousSibling;
        index++;
    }
    while (item != null);

    $("#floatleft img").replaceWith('<img src="images/image' + index + '.jpg" />');
});

jQuery图像替换

2 个答案: