2

2 つのリストがあります。1 つ目は左側に、2 つ目は右側に表示されます。左側の要素をクリックすると、その要素が削除され、右側のリストの前に追加されます (逆のアクション)。

これは私のhtmlです：

<div class="cont">
   <div  id="groupL" class="innDiv">
       <div id="1" class="aaaL">Value 1</div>
       <div id="2" class="aaaL">Value 2</div>
   </div>
   <div  id="groupR" class="innDiv">
       <div id="4" class="aaaR">Value 4</div>
       <div id="3" class="aaaR">Value 3</div>
   </div>
</div>

ジャバスクリプトのソースです。

var clickLtoR  = function(n){
   _this = $('#'+n);
   $('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
  _this.remove();

}

var clickRtoL = function(n){
    _this = $('#'+n);
    $('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();

}

$('.aaaL').click(function(){
    clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
    clickRtoL($(this).attr("id"));
});

たとえば「Value1」をクリックすると、この div を右に移動する必要があります。

動作します..しかし、同じ要素をもう一度クリックすると、たとえば、前の例の「値1」に従って、これには関連付けられたクリックイベントがなく、左側のリストに戻りません。

この問題を解決し、「新しい要素」のクリックをバインドするにはどうすればよいですか?

ここでは、JSFiddle http://jsfiddle.net/uw446/1/の作業コード

4

2 に答える 2

5

http://jsfiddle.net/uw446/2/

$("div.el").on("click", function() {
    var $this = $(this);
    if ($this.hasClass("aaaL")) {
        $this.removeClass("aaaL").addClass("aaaR").prependTo("#groupR");
    } else {
        $this.removeClass("aaaR").addClass("aaaL").prependTo("#groupL");
    }
});

あなたは確かにこれを過度に複雑にしています。上記は問題なく動作するはずです。

于 2013-07-27T23:28:25.637 に答える
1

これを試して..

$('div.cont div div').click(function(){
  var $value = $(this);
  var $parent = $value.parent();
    if($parent.attr('id') == 'groupL'){
      $parent.next('#groupR').prepend($value);
    }else if($parent.attr('id') == 'groupR'){
      $parent.prev('#groupL').prepend($value);
    }
})

http://jsfiddle.net/uw446/4/

于 2013-07-27T23:54:58.323 に答える