Question

我基本上试图将一个列表项从一个无序列表中来回移动到另一个非常基本的东西。我可以点击一次，所以它会收到一个新类（＆＃34; squad-btn＆＃34;）并摆脱他的旧类（＆＃34; player-btn＆＃34;）并正确移动到另一个列表（小队列表）。

问题是，一旦加入此新列表，我就无法将其移回。我的删除和创建课程似乎很好。这里有什么问题？

$(document).ready(function() {

    $(".player-btn").click(function() { 
        $(this).appendTo("#squad-list");
        $(this).addClass("squad-btn");
        $(this).removeClass("player-btn");
    });

    $(".squad-btn").click(function () {
        $(this).appendTo("#player-list");
        $(this).addClass("player-btn");
        $(this).removeClass("squad-btn");
    });

});

我的html文件：

<style type="text/css">

    #content-box {
        width: 400px;
        height: 600px;
    }
    #player-box {

        vertical-align: middle;
        height: 600px;
        width: 200px;
        background-color: green;
    }

    #squad-box { 

        height: 600px;
        width: 200px;
        background-color: blue;
    } 

    li {

        list-style-type: none;
        padding-top: 20px;
    }
</style>

<html>

<head>


    <link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>

<script type="text/javascript" src="code.js"></script>

<body>

    <div class = "container-fluid text-center">

        <div align = "center">

        <h1>Squad Builder</h1>


        <div id = "content-box">

            <div id = "player-box" class = "col-md-6">

                <ul id = "player-list">

                    <li class = "player-btn"><button>Messi</button></li>

                </ul>

            </div>

            <div id = "squad-box" class = "col-md-6">

                <ul id = "squad-list">


                </ul>

            </div>

        </div>

        </div>

    </div>

</body>

</html>

Answer 1

你需要取消绑定前一个单击处理程序，并将其重新绑定到正确的处理程序 - 一旦绑定了一个事件处理程序，它就不会每次检查类列表，它只是绑定到该元素。

你可以这样做：

$(document).ready(function() {
  function handlePlayerButtonClick() {
      $(this).appendTo("#squad-list");
      $(this).addClass("squad-btn");
      $(this).removeClass("player-btn");
      $(this).off('click').on('click', handleSquadButtonClick);
  }

  function handleSquadButtonClick() {
      $(this).appendTo("#player-list");
      $(this).addClass("player-btn");
      $(this).removeClass("squad-btn");
      $(this).off('click').on('click', handlePlayerButtonClick);
  }

  $(".player-btn").on('click', handlePlayerButtonClick);
  $(".squad-btn").on('click', handleSquadButtonClick);
});

在appendTo之后无法单击按钮

1 个答案: