如何壓縮150多個jQuery的功能，對不同的div做同樣的事情？

即時通訊新的jquery和javascript ..這裏是代碼，這是一個示例，在真實的網頁上將有超過150種飲料，下面顯示了5種，是否有一種方法來壓縮此代碼？這使得它點擊一個div時，另一個div會反彈。反彈的div包含小圖像，這被用作查找飲料的巨大菜單系統。感謝您的時間和幫助。如何壓縮150多個jQuery的功能，對不同的div做同樣的事情？

$(document).ready(function(){ 
$("#Pepsi").click(function(){ 
    $("#Pepsi-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
}); 
$("#Coke").click(function(){ 
    $("#Coke-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
}); 
$("#Crush").click(function(){ 
    $("#Crush-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
}); 
$("#7up").click(function(){ 
    $("#7up-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
}); 
$("#RootBeer").click(function(){ 
    $("#RootBeer-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
}); 
});

來源

2012-06-29 user1490373

粘貼這些5的HTML也 – 2012-06-29 06:07:35

它可能有助於http://stackoverflow.com/questions/5081664/is-it-possible-to-combine-functions-for-different-selectors-like-this-in- jquery – Tamkeen

爲了詳細說明JK的答案，你可以試試這個：

$(".drink").click(function(){ 
    $('#'+$(this).attr('id')+'-Div"]').delay(600).effect("bounce", { times:3, distance:30 }, 300); 
});

這會選擇ID爲X-Div的元素，其中X是被單擊元素的ID。

來源

2012-06-29 06:46:51 egasimus

我建議'this.id'而不是'$（this）.attr（'id'）' - 在運行時更加高效，並且在我看來更容易閱讀。 – nnnnnn

這工作很好，謝謝，我用this.id建議。 – user1490373

添加同一類這些div的每一個（或選擇基於東西，所有這些div的共同點：

<div id="Coke" class="drink">Coke</div> 
<div id="Sprite" class="drink">Sprite</div> 
// all divs have the same class="drink" 

$(".drink").click(function(){ 
    $(this).delay(600).effect("bounce", { times:3, distance:30 }, 300); 
});

編輯：更新上運行相關的反彈效應DIV，而不是點擊DIV：

$(".drink").click(function(){ 
    $(this + "-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300); 
});

來源

2012-06-29 06:09:32

但'$（this）'不會幫助。看看上面的代碼。有兩個不同的div被點擊並生效。我的意思是，如果'$（「＃Crush」）'被點擊，則產生'$（「＃Crush-Div」）'。 – F0G

對不起，如果不清楚，是每個飲料都有2個div，點擊的div和生效的div。 – user1490373

'$（「＃」+ this.id +「-Div」）。delay（...）'會做到這一點。 – nnnnnn

-1

<div id="test" class="divi">test Clicked</div> 
<div id="test-Div">test Effected</div> 

<div id="test2" class="divi">test2 Clicked</div> 
<div id="test2-Div">test2 Effected</div> 

<div id="test3" class="divi">test3 Clicked</div> 
<div id="test3-Div">tetst3 Effected</div> 

<div id="test4" class="divi">test4 Clicked</div> 
<div id="test4-Div">test4 Effected</div> 

<script> 

$(".divi").click(function(){ 

var var1 = "#" + this.id + "-Div"; 

$(var1).hide(); 

}); 

</script>

，但是你想，你可以用這個。它與hide（）一起工作，所以你可以編輯它。 jsfiddle。

來源

2012-06-29 06:55:05 F0G

我不知道你的HTML，但看起來你有一些元素，每個元素單擊時動畫的另一個元素。

如何構建你的HTML這樣的：

<div data-bounce-target="#Pepsi-Div">Pepsi</div> 
<div data-bounce-target="#Code-Div">Coke</div> 
<div data-bounce-target="#7up-Div">7up</div> 
<div data-bounce-target="#Crush-Div">Crush</div> 
<div data-bounce-target="#Rootbeer-Div">Rootbeer</div> 

<div id="Pepsi-Div">I'm a bouncing Pepsi</div> 
<div id="Coke-Div">I'm a bouncing Coke</div> 
<div id="7up-Div">I'm a bouncing 7up</div> 
<div id="Crush-Div">I'm a bouncing Crush</div> 
<div id="Rootbeer-Div">I'm a bouncing Rootbeer</div>

然後你可以概括你的Javascript這樣的：

$(function() { 
    $('div[data-bounce-target]').on('click', function() { 
     var targetElementId = $(this).data('bounce-target'); 
     $(targetElementId).delay(600).effect("bounce", { times:3, distance:30 }, 300); 
    }); 
});

這樣的目標元素在你的HTML代碼中指定。如果您需要更改元素的目標，則不必修改您的Javascript。同樣，當你需要添加其他元素時需要反彈的目標，你不需要改變你的Javascript。

這是working example in jsFidle。

來源

2012-06-29 06:55:57

如何壓縮150多個jQuery的功能，對不同的div做同樣的事情？

回答

相關問題