7278


たとえば、aaa222が右に100px動いていて、bbbをクリックすると、その動いていたaaa222を元の0pxのポジションに戻して、bbb222を右に100px動かしたいです。  
ccc222も同じように動いてほしいです。  
つまり、右側に動かすのは１つだけで、ほかの２つはクリックされたら、元の0pxに戻る、というプログラムにしたいのですが、どうしたらよいのでしょうか？

[code]

    <script>
    $(function(){
     var duration=300;
     var $a2=$("#aaa222");
     $("#aaa").on("click",function(){
      $a2.toggleClass("goA2");
      if($a2.hasClass("goA2")){
       $a2.stop(true).animate({
        left:100},
        duration);
      }else{
       $a2.stop(true).animate({
        left:0},
        duration);
      }
     })
     
    });
    
    $(function(){
     var duration=300;
     var $b2=$("#bbb222");
     $("#bbb").on("click",function(){
      $b2.toggleClass("goB2");
      if($b2.hasClass("goB2")){
       $b2.stop(true).animate({
        left:100},
        duration);
      }else{
       $b2.stop(true).animate({
        left:0},
        duration);
      }
     })
     
    });
    
    $(function(){
     var duration=300;
     var $c2=$("#ccc222");
     $("#ccc").on("click",function(){
      $c2.toggleClass("goC2");
      if($c2.hasClass("goC2")){
       $c2.stop(true).animate({
        left:100},
        duration);
      }else{
       $c2.stop(true).animate({
        left:0},
        duration);
      }
     })
     
    });
    
    </script>
[/code]

[code]

    <style>
    #aaa{
     display:block;
     position:relative;
     width:500px;
     height:50px;
     background:rgba(0,0,255,1);
     }
    #aaa222{
     display:block;
     position:relative;
     top:20px;
     width:50px;
     height:10px;
     background:rgba(51,255,153,1);
     
     }
    #bbb{
     display:block;
     position:relative;
     width:500px;
     height:50px;
     background:rgba(0,255,255,1);
    }
    #bbb222{
     display:block;
     position:relative;
     top:20px;
     width:50px;
     height:10px;
     background:rgba(153,51,102,1);
     
     }
    #ccc{
     display:block;
     position:relative;
     width:500px;
     height:50px;
     background:rgba(50,100,100,1);
     }
    #ccc222{
     display:block;
     position:relative;
     top:20px;
     width:50px;
     height:10px;
     background:rgba(153,0,0,1);
     
     }
    
    
    
    </style>
[/code]

[code]

    <body>
    
    <div id="aaa"><div id="aaa222"></div></div>
    <div id="bbb"><div id="bbb222"></div></div>
    <div id="ccc"><div id="ccc222"></div></div>
    </body>
[/code]


CC BY-SA 3.0
2015-02-28T22:51:37.347
7258
2015-03-04T12:55:25.573
2015-03-01T00:24:56.753
85
7647
question
javascript jquery
jQuery - 3つある要素の1つをクリックして右に動かし、残りの2つを元のポジションに戻すコードを書きたい


一つのイベントから3つのエレメントを動かしたいならそういうプログラムにする必要があると思います。  
onのハンドラの中に

[code]

    $('#aaa222,#bbb2222,#ccc222').each(function(i, bar){
        if(イベントが起きたのが自分か){
             $(bar).stop().animate({left:100, duration:300});
        } else {
            $(bar).stop().animate({left:0, duration:300});
        }
    });
    
[/code]

のような処理を書く必要があるでしょう。  
全部書くと、それはつまり私のためにプログラムを書いてくださいということとほぼ等しくなってしまうのでこれだけにしておきます。  
アドバイスとして言えることは、バブリングに注意してください。というくらいですかね。


CC BY-SA 3.0
2015-03-01T01:00:14.780
7259
2015-03-01T01:00:14.780
8136
7258
answer


色々やり方はあると思いますが、  
以下の様にすればいいかと思います。

[code]

    $(function(){
        var duration=300;
        $("#aaa222,#bbb222,#ccc222").bind("move", function(e, myID){
        //クラスの代わりにIDを使うことにした。既に効果が適用されているかどうかのチェックは行わないことにしている。
            if($(this).attr("id")==myID){
                $(this).stop(true)
                       .animate({left:100},duration);
            } else {
                $(this).stop(true)
                       .animate({left:0},duration);
            }
        });
    
        $("#aaa,#bbb,#ccc").on("click",function(){
            var ID = $(this).attr("id") + 222;//親要素と規則性がある
            //それぞれに効果を呼び出す（カスタムイベント発火）
            $("#aaa222").triggerHandler("move", ID);
            $("#bbb222").triggerHandler("move", ID);
            $("#ccc222").triggerHandler("move", ID);
        });
    });
    
[/code]


CC BY-SA 3.0
2015-03-01T12:41:22.533
7278
2015-03-01T12:41:22.533
5044
7258
answer


もう一つ`<div>`を追加して、各要素にクラスを割り当てれば以下のように書けます。  
(`<div>`は追加する必要はないんですが、実用的ではないので･･･)

[code]

    <script>
    $(function(){
        var duration=300;
        $(document).on('click', '.parent', function(){
            $(this).siblings().find('.child').stop(true).animate({left:0}, duration);
            $(this).find('.child').stop(true).animate({left:100}, duration);
        });
    });
    </script>
    
[/code]

[code]

    <body>
    <div>
        <div id="aaa" class="parent"><div id="aaa222" class="child"></div></div>
        <div id="bbb" class="parent"><div id="bbb222" class="child"></div></div>
        <div id="ccc" class="parent"><div id="ccc222" class="child"></div></div>
    </div>
    </body>
    
[/code]


CC BY-SA 3.0
2015-03-02T06:50:45.000
7319
2015-03-04T12:55:25.573
2015-03-04T12:55:25.573
7214
7214
7258
answer