jQuery的许多相同的元素，一个具有当您单击

开始我有这样的代码：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; 
    } 


});

当我点击IMG应该改变形象和表演股利。当我再次点击图片应该回到第一和div应该隐藏。这工作正常。但我想这样做应该有许多imgae按钮和许多div，并且在单击一个图像按钮后，应该只更改此图像并在图像下方打开div。我不知道他的图片和div会有多少，因为它们是从数据库生成的。如何创建jQuery代码来不重复jQuery代码

来源

2012-03-15 domos

这类问题表明了我最讨厌的jQuery的原因之一。这让我想问一问：“你在这个世界上是如何期望这可能的工作？”...... – 2012-03-15 21:55:41

你可能想要给图像和div之间的关系标志。那么它会更容易和更安全。 – 2012-03-15 22:54:35

@domos：问问你自己，你将如何为一个菜单项专门定义一种风格？你不能，因为它们是相同的，这就是问题所在。 – 2012-03-16 09:59:46

要回答你的问题，我假设你有一个容器，如<div id="images">...</div>。现在的解决方案是非常简单的：

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的，这意味着它的相当快完成。它也代表事件，所以只有一个侦听器，而不是每个图像一个。

来源

2012-03-15 21:55:17

你讨厌jQuery>。<我能感觉到你:) – 2012-03-15 21:57:35

是的，我讨厌它和我讨厌的诗一样多...> _> – 2012-03-15 21:58:12

试试这个：

$('.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; 
    } 
});

来源

2012-03-15 21:57:48 Ohgodwhy

我可能已经这样做了，如：

<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>

然后

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

来源

2012-03-15 22:59:17

jQuery的许多相同的元素，一个具有当您单击

回答

相关问题