0

私はjqueryとjavascriptを初めて使用します。これがコードです。これはサンプルです。実際のページには150種類以上の飲み物があり、5つは以下に示されています。このコードを要約する方法はありますか? 1 つの 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 に答える