Question

我实际上是在JQuery中创建一个购物车，当你点击它们时，元素会放在一个大盒子里。问题是我需要＆＃34;双击＆＃34;实际上让图标移动到框中。通过使用prependTo或appendTo，第一次单击只需将图标移动到左/右边框。为什么？你能帮我修改一下我的代码吗？

让我们看看现场的错误......

现场演示：http://raphaelmartin.fr/kitcasino/jsfiddlebug.html

JSFiddle：http://jsfiddle.net/xbsoLp0u/2/

代码：

cart.html

<div id="selected"></div>

    <div id="nonSelected">

      <label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'></label>
      <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    

      <label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'></label>
      <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">

      <label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'></label>
      <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">

      <label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'></label>
      <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">

      <label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'></label>
      <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">

      <label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'></label>
      <INPUT id="boule" type="checkbox" value="La Boule" name="game[]">

  </div>

的script.js

function moveButton(elem){
    if( $(elem).parent().attr("id") == "nonSelected" ){
        $(elem).detach().prependTo('#selected');
    }
    else{
        $(elem).detach().prependTo('#nonSelected'); 
    }
}

Answer 1

使用ondblclick而不是onclick。您还可以通过Javascript而不是html -

更好地添加点击处理程序

$(function(){
    function moveButton(){
        if( $(this).closest("#nonSelected").length) {
            $(this).prependTo('#selected');
        }
        else{
            $(this).prependTo('#nonSelected'); 
        }
    }

    $("#nonSelected").on("dblclick", moveButton);
});

注意：prependTo（）自动分离，参数实际上是一个事件，使用＆＃34;这个＆＃34;而不是元素......

Answer 2

问题是未选中图标的父级不是#nonSelected DIV，而是<label>。而不是$(elem).parent()，请使用$(elem).closest("div")。

此外，您应该将标签与图像一起移动。

function moveButton(elem){
    if( $(elem).closest("div").attr("id") == "nonSelected" ){
        $(elem).parent().prependTo('#selected');
    }
    else{
        $(elem).parent().prependTo('#nonSelected'); 
    }
}

Corrected Fiddle

Answer 3

HTML修改

 <label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'>
  <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    </label>

  <label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'>
  <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]"></label>

  <label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'>
  <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]"></label>

  <label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'>
  <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]"></label>

  <label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'>
  <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]"></label>

  <label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'>
  <INPUT id="boule" type="checkbox" value="La Boule" name="game[]"></label>

的Javascript

function moveButton(elem){
    if( $(elem).parent().parent().attr("id") == "nonSelected" ){
        $(elem).detach().prependTo('#selected');
    }
    else{
        $(elem).detach().prependTo('#nonSelected'); 
    }
}

PrependTo（）bug

3 个答案: