Javascript jQuery包含许多相同的元素，其中一个必须在单击时启动

我有这样的代码：

<img src="fl_uk.png" class="menulink" />
<div class="test">Something</div>
<img src="fl_uk.png" class="menulink" />
<div class="test">Something2</div>





$('.menulink').click(function(){
    if($('.menulink').attr('src') == "fl_pol.png"){
        $(this).attr('src',"fl_uk.png");
        $('.test').hide('slow');
        return false;
    }   
    else
    {
        $(this).attr('src',"fl_pol.png");
        $('.test').show('slow');
        return false;
    }


});

某物
什么
$（'.menulink'）。单击（函数（）{
如果（$（'.menulink'）.attr（'src'）=“fl_pol.png”）{
$（this.attr（'src'，“fl_uk.png”）；
$（'.test'）.hide（'slow'）；
返回false；
}   
其他的
{
$（this.attr（'src'，“fl_pol.png”）；
$（'.test'）.show（'slow'）；
返回false；
}
});

当我点击img时，应该改变图像并显示div。当我再次点击时，图像应该回到第一个，div应该隐藏。那很好。但我想这样做，应该有许多imgae按钮和许多div，点击一个图像按钮后，应该只改变这个图像和打开div下面的图像。我不知道会有多少他的图像和div，因为它们是从数据库生成的。

---

如何创建jQuery代码以避免重复jQuery代码要回答您的问题，我假设您在这些图像周围有一个容器，例如

…

。现在，解决方案非常简单：

document.getElementById('images').onclick = function(e) {
    e = e || window.event;
    var t = e.currentSrc || e.target;
    if( !t.tagName) t = t.parentNode;
    while( t != this && t.tagName != "IMG") t = t.parentNode;
    if( t != this) {
        if( t.src == "fl_pol.png") {
            t.src = "fl_uk.png";
            t.nextSibling.style.display = "none";
        }
        else {
            t.src = "fl_pol.png";
            t.nextSibling.style.display = "";
        }
        return false;
    }
};

这是在原始JS中完成的，而不是jQuery，这意味着它要快得多。它还代理事件，因此只有一个侦听器，而不是每个图像一个侦听器。

尝试以下操作：

$('.menulink').on('click', function(){
  if($(this).attr('src') == "fl_pol.png"){
    $(this).attr('src',"fl_uk.png");
    $(this).next('.test').hide('slow');
    return false;
  }else{
    $(this).attr('src',"fl_pol.png");
    $(this).next('.test').show('slow');
    return false;
  }
});

---

我可能会这样做：

<img src="fl_uk.png" rel="uk" class="menulink" />
<div class="test" rel="uk_div">Something</div>
<img src="fl_pol.png" rel="pol" class="menulink" />
<div class="test" rel="pol_div">Something2</div>

---

这种问题说明了我讨厌jQuery的原因之一。这让我想问“你到底是如何期望这可能的工作的？”…你可能想在图像和div之间给出一个关系标志。这样就更容易、更安全了。@domos：问问你自己，你将如何为一个菜单项定义一个特定的样式？你不能这样做，因为它们是相同的，这就是问题所在。@Kolink:jQuery被软件工程师和精通javascript的人使用时非常棒。jQuery的“好处”是，它也可以在没有javascript或软件工程技能的情况下使用，这就是为什么你讨厌jQuery:-）@TJ。是的，可能就是这样。你说的一针见血。你讨厌jQuery><我能感觉到你：）是的，我讨厌它就像我讨厌诗歌一样…>\u>

$(".menulink").on("click",function(){
    $(".test").hide();
    $("div[rel='"+$(this).attr("rel") + "_div']").show());
});