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的許多相同的元素，一個具有當您單擊

回答

相關問題