.bindと.unbindを使ってLIを動かす

Question

私は、選択されたliをボックス1からボックス2に、ボックス2からボックス1に戻すためにバインドを使用する方法を理解しようとしています。これに固執し、いくつかの助けが必要です。また、「右に移動」をクリックしてliを選択して次のボックスに移動すると、それらはクリックごとにスタックします。どのように私はそれを修正することができます。

コード：

$(document).ready(function(){ 
      $(".box1 ul li").click(function(){ 
       if($(this).hasClass("active-li")==true) 
       { 
        $(this).removeClass("active-li"); 
       } 
       else 
       { 
        $(this).addClass("active-li"); 
       } 
      }); 
      $(".box1 ul li").click(function(){ 
       var x=$(this).data("drink"); 
       $("#btt1").click(function(){ 
        $(".box2 ul").append(x); 
        $(x).bind("click", bindLi); 


       }); 
      }); 
      $(x).bind("click", bindLi); 
     }); 


     function bindLi(){ 
      alert("hello"); 
     } 

CSS：

 .box1{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:50px;} 
     .box2{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:100px;} 
     .button-container{width:80px; height:30px; float:left; margin-top:200px; margin-left:100px;} 
     .active-li{background-color:yellow;} 
     ul li:hover{cursor:pointer;} 

HTML：

<div class="box1" id="box1"> 
     <ul> 
      <li data-drink="beer"> 
       Beer 
      </li> 
      <li data-drink="water"> 
       Water 
      </li> 
      <li data-drink="soda"> 
       Soda 
      </li> 
      <li data-drink="juice"> 
       Juice 
      </li> 
     </ul> 
    </div> 
    <div class="button-container"> 
     <input type="button" id="btt1" name="btt1" value="Move Right" /> 
     <input type="button" id="btt2" name="btt2" value="Move Left" /> 
    </div> 
    <div class="box2" id="box2"> 
     <ul></ul> 
    </div> 

JSFiddle：

https://jsfiddle.net/fgo455zt/

Answer 1

コードの下を見てみてください。

https://jsfiddle.net/fgo455zt/5/

を私たちは、単にコードすることができ、次のように：

$(document).ready(function() { 
    $(".box1 ul li, .box2 ul li").click(function() { 
    $(this).toggleClass("active-li"); //highlight the clicked li 
    }); 

    $("#btt1, #btt2").click(function() { 
    var sourceUL = null; 
    var targetUL = null; 
    //depending upon which button clicked we are moving selected li to and from source to target UL 
    if ($(this).attr("id") == "btt1") { 
     sourceUL = $(".box1 ul"); 
     targetUL = $(".box2 ul"); 
    } else { 
     sourceUL = $(".box2 ul"); 
     targetUL = $(".box1 ul"); 
    } 

    $(sourceUL).find("li.active-li").each(function() { 
     $(this).removeClass("active-li"); //removing the active class before moving the li 
     $(targetUL).append($(this)); 
    }); 
    }); 

});