0

我是 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);
 });
});
4

4 回答 4

2

为每个 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-29T06:09:32.477 回答
1

要详细说明 JK 的答案，您可以试试这个：

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

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

于 2012-06-29T06:46:51.927 回答
1

我不知道您的 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 中的一个工作示例。

于 2012-06-29T06:55:57.430 回答
-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-29T06:55:05.053 回答