Question

我有一张带有Rows的表。我有一个足球场div 每个玩家的孩子DIV！

当我点击一行时，我有一个JQuery Funktion将玩家添加到My Field（带有一个playerID）！在那之后挑选的球员灰了！

但是现在我想在灰色的行上再次点击时，从Field中移除玩家（动态地根据他的ID）！

如果没有像

这样的静态选择器选择，我怎么能这样做呢？

$("#goalkeeper").empty();

这是我的小提琴： https://jsfiddle.net/qcvcga8k/30/

对于alllll提示的thx;）

亚历

编辑：以下是相关代码：

Javascript：（主要的相关部分是我的addGoalkeeperByClickEvent（）函数，我正在使用＆＃34;＃goalie＆＃34;作为选择器，这就是为什么这个解决方案适用于那一刻，但我想永远使用用户点击的玩家动态...但我在这里只谈到一个解决方案来移除玩家，添加一个玩家已经成功地工作......

var GoalKeeperQuantity = 0;
  var DefenderQuantity = 0;
  var MidfielderQuantity = 0;
  var ForwardQuantity = 0;
  var totalPlayersOnField = 0;


  function addGoalkeeperByClickEvent(playerName) {
    $(document).off('click', '.goalKepperRow, .goalKepperRowGrey, .greyRow').on('click', '.goalKepperRow, .goalKepperRowGrey, .greyRow', function() {


      $('#goalkeeperLine div p').first().parent().html("<img src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1188/shirt-333.svg'><span class='ui-icon  ui-icon-circle-close remove' style='top: -69.0833px; left: 34.3167px;'></span>".concat(playerName));

            if ($(this).css("background-color")==="rgb(217, 217, 217)") {
                    $(this).attr('class', 'greyRow');
          GoalKeeperQuantity++;
            totalPlayersOnField++;
          //alert(GoalKeeperQuantity);
            }else{
                    $(this).attr('class', 'goalKepperRow');
          GoalKeeperQuantity--;
            totalPlayersOnField--;
          //alert(GoalKeeperQuantity);


         $("#goalie").empty()
         $("#goalie").html("<p></p>")


            }


    });
  };




// If the user clicks on the "x", remove the player and subtract the qnt of players
$("#field").on("click", "span.remove", function(e) {
  // remove player from field (means >>> empty the relevant DIV)
  var me = $(this).parent();
  me.empty();

  // add p elemnt to the empty div
  me.html("<p></p>")
  var title = '';

  // Check what kind of position the user has removed
  switch ($(this).parent().attr('position')) {
    case "goalkeeper":
      GoalKeeperQuantity--;
      alert(GoalKeeperQuantity);
      break;
    case "defender":
      DefenderQuantity--;
      alert(DefenderQuantity);
      break;
    case "midfielder":
      MidfielderQuantity--;
      alert(MidfielderQuantity);
      break;
    case "forward":
      ForwardQuantity--;
      alert(ForwardQuantity);
      break;
  }
});

HTML 这里我在右侧和中间有一个简单的桌子足球场（我可以添加和删除一名足球运动员）

<div id="container">


  <!-- Main Content area -->
  <section id="content">
    <div id="field">

      <span id="goalkeeperLine">   
          <div id="goalie" position="goalkeeper" class="drop thirdColumn rear">
            <p></p>
          </div>
     </span>
     </div>
  </section>

  <!-- SIDBAR RIGHT / TABLE OF PLAYERS -->
  <aside>
    <table class="player_table">
      <tr style="background-color: #fad32b; color:black; font-size:14px;">
        <td style="width:32%">&nbsp;&nbsp;&nbsp;&nbsp;Playername</td>
        <td style="width:13%">Club</td>
        <td style="width:9%">Pos.</td>
        <td style="width:15%">Points</td>
        <td style="width:20%">Costs (in Mio.)</td>
      </tr>
      <tr id="gk1" player-type="goalkeeper" class="goalKepperRow" onclick="addGoalkeeperByClickEvent('Manuel Neuer');">
        <td >
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Manuel Neuer
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>GK</td>
        <td>43</td>
        <td>12.2</td>
      </tr>
      <tr  id="df1" player-type="defender" class="defenderRow" onclick="addDefenderByClickEvent('Jerome Boateng');">
        <td>
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Jerome Boateng
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>DF</td>
        <td>39</td>
        <td>11.1</td>
      </tr>
      <tr id="df2" player-type="defender" class="defenderRow" onclick="addDefenderByClickEvent('Holger Badstuber');">
        <td>
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Holger Badstuber
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>DF</td>
        <td>31</td>
        <td>9.8</td>
      </tr>
      <tr id="df2" player-type="defender" class="defenderRow" onclick="addDefenderByClickEvent('Mats Hummels');">
        <td>
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Mats Hummels
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>DF</td>
        <td>33</td>
        <td>10.2</td>
      </tr>
      <tr id="mf1" player-type="midfielder" class="midfielderRow" onclick="addMidfielderByClickEvent('Semih Kedhira');">
        <td>
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Semih Kedhira
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>DF</td>
        <td>31</td>
        <td>8.9</td>
      </tr>
      <tr id="mf1" player-type="forward" class="forwardRow" onclick="addForwardByClickEvent('Thomas Müller');">
        <td>
            <span id="#btnAddPlayer" class="btnAddPlayer">+</span>Thomas Müller
        </td>
        <td><img width="12%" src="https://d34h6ikdffho99.cloudfront.net/uploads/real_team/emblem/1098/logo-296.svg">FCB</td>
        <td>DF</td>
        <td>31</td>
        <td>6.3</td>
      </tr>
    </table>
  </aside>

CSS （我知道它的版本很长，但很多东西都很重要）

/* Content
--------------------------------------------- */

#content {
  float: left;
  margin: 1% 1%;
  width: 40%;
}


/* field
--------------------------------------------- */

#field {
  background-image: url(https://picload.org/image/rdllrgdp/field2.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 0%;
  min-width: 250px;
  min-height: 1000px;
  max-width: 800px;
  position: relative;
}


/* Sidebar
--------------------------------------------- */

#sidebar {
  float: left;
  padding: 0% 1% 1%;
  margin: 1% 0% 0% 0%;
  width: 15%;
  color: white;
  background-color: black;
}

.goalkeeper,
.defender,
.forward,
.midfielder {
  float: left;
  padding: 0% 1% 0%;
  margin-top: 1%;
  margin-right: 0%;
  width: 39%;
  color: white;
  background-color: black;
}

.drop {
  border: 1px;
  height: 5vw;
  width: 5vw;
  color: white;
  font-size: 13px;
  text-align: center;
  border-radius: 17%;
  border-style: dashed;
}

.ui-droppable-active {
  color: #cfcfcf;
  border: 2px dotted #ccc;
  background-color: #272727;
}

.ui-droppable-hover {
  border: 2px dotted #fefe88;
}

.rear {
  position: absolute;
  top: 10px;
}

.firstColumn {
  position: absolute;
  left: 98px;
}

.secondColumn {
  position: absolute;
  left: 176px;
}

.def {
  position: absolute;
  top: 90px;
}

.mid {
  position: absolute;
  top: 183px;
}

.for {
  position: absolute;
  top: 277px;
}

.thirdColumn {
  left: 251px;
}

.fourthColumn {
  left: 327px;
}

.fifthColumn {
  left: 403px;
}

.bottom {
  position: absolute;
  top: 300px;
}

#field span.remove:hover {
  background-color: #000;
  border-radius: 8px;
}

.btnAddPlayer {
  visibility: hidden;
  background: #4ad934;
  background-image: -webkit-linear-gradient(top, #4ad934, #37ab26);
  background-image: -moz-linear-gradient(top, #4ad934, #37ab26);
  background-image: -ms-linear-gradient(top, #4ad934, #37ab26);
  background-image: -o-linear-gradient(top, #4ad934, #37ab26);
  background-image: linear-gradient(to bottom, #4ad934, #37ab26);
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 0px 5px 0px 5px;
  text-decoration: none;
}

.btnAddPlayer:hover {
  background: #26ff00;
  background-image: -webkit-linear-gradient(top, #26ff00, #1ee000);
  background-image: -moz-linear-gradient(top, #26ff00, #1ee000);
  background-image: -ms-linear-gradient(top, #26ff00, #1ee000);
  background-image: -o-linear-gradient(top, #26ff00, #1ee000);
  background-image: linear-gradient(to bottom, #26ff00, #1ee000);
  text-decoration: none;
}

.forwardRowGrey:hover span.btnAddPlayer,
.midfielderRowGrey:hover span.btnAddPlayer,
.defenderRowGrey:hover span.btnAddPlayer,
.goalKepperRowGrey:hover span.btnAddPlayer,
.forwardRow:hover span.btnAddPlayer,
.midfielderRow:hover span.btnAddPlayer,
.defenderRow:hover span.btnAddPlayer,
.goalKepperRow:hover span.btnAddPlayer,
.defender:hover span.btnAddPlayer,
.goalkeeper:hover span.btnAddPlayer {
  visibility: visible;
}

.goalKepperRow, .defenderRow, .midfielderRow, .forwardRow {
  background-color: white;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;  
}

.greyRow{
  background-color: #999999;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;   
}

.goalKepperRowGrey, .defenderRowGrey, .midfielderRowGrey, .forwardRowGrey{
  background-color: #F6F6F6;
  color: #000;
  font-family: arial;
  font-size: 14px;
  cursor: pointer;  
}

.goalKepperRow:hover, .defenderRow:hover, .midfielderRow:hover, .forwardRow:hover, .goalKepperRowGrey:hover, .defenderRowGrey:hover, .midfielderRowGrey:hover, .forwardRowGrey:hover
{
  background-color: #D9D9D9;
  color:black;
}

Answer 1

你的小提琴示例有一个id为“goalkeeperLine”的范围，其中包含id为“守门员”的div。

您可以使用这些jQuery函数隐藏和显示“守门员”div。

$（“＃守门员）.hide;
$（ “＃守门员”）显示;

然而，您可能需要在“守门员”div内移动“goalkeeperLine”span标记，以便在隐藏div时隐藏该元素。

Jquery - 如何动态删除内容

1 个答案: