如何压缩 150 多个对不同 div 执行相同操作的 jquery 函数

Question

我是jquery和JavaScript的新手。这是代码，这是一个示例，在真实页面上会有 150 多种饮料，下面显示 5 种，有没有办法压缩这个代码？当单击一个div 时，另一个div 会反弹。反弹的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);
 });
});

Answer 1

将相同的类添加到每个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);
 });

Answer 2

要详细说明JK的答案，您可以尝试以下方法：

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

这将选择具有 id X-Div 的元素，其中X是单击的元素的 id。

Answer 3

我不知道

你的 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。

这是jsFidle中的一个工作示例。

Answer 4

<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（），因此您可以对其进行编辑。杰斯菲德尔。