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。

这是working example in 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（），因此您可以编辑它。 jsfiddle

如何压缩超过150个jquery函数，它们对不同的div做同样的事情？

4 个答案: