如何將多個按鈕選擇添加到Div

所以我有一個帶有按鈕和匹配資訊的表格，當我點擊特定按鈕時，我試圖撰寫一個代碼，它將我的選擇添加到 div(cart) 例如，如果我點擊第一個按鈕 (1.59)，它應該將匹配名稱添加到購物車 (Arsenal-Chelsea) , 相關選擇 (Arsenal) OR Header Name (Home) 和 Value (1.59) 按此順序

阿森納-切爾西 阿森納 1.59

另外，每當我重新單擊同一個按鈕（1.59）時，我都需要它能夠正常作業，它應該能夠從購物車中洗掉選擇

$(".nr").click(function() {
  var $item = $(this).closest("tr").find(".nr").val();
  $("#cart").append($item);
  $("#cart").append("<div class='cart' Id='cart'>");
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>

<div class="cart" Id="cart">
  <div class="title">Bet Slip</div>
  <chr/>
  <div id="sel"><span></span></div><br>
  <span>Selections:</span><br>
  <button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
  <thead>
    <tr class="ui-widget-header ">
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type=button class="nr" value="1.59"></td>
      <td><input type=button class="nr" value="3.40"></td>
      <td><input type=button class="nr" value="2.90"></td>
      </td>
    </tr>
    <tr>

      <td>Man United-Man City</td>
      <td><input type=button class="nr" value="2.70"></td>
      <td><input type=button class="nr" value="2.90"></td>
      <td><input type=button class="nr" value="2.50"></td>
      </td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type=button class="nr" value="3.60"></td>
      <td><input type=button class="nr" value="3.20"></td>
      <td><input type=button class="nr" value="1.95"></td>
      </td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

您需要使用 DOM 遍歷來查找與單擊的按鈕相關的內容。要獲取地點，您可以獲取包含的索引，td然后檢索thead th包含文本的匹配項。要獲得匹配，您可以獲取td當前行中第一個的文本。

添加新內容時，不要使用id屬性，因為它們必須是唯一的。

另請注意，在以下示例中，我修復了您的 HTML 中的一些問題，例如多余的</td>標簽和洗掉<chr />不存在的標簽。

let $th = $('#choose-address-table thead th');

$(".nr").on('click', e => {
  let $btn = $(e.target);
  let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
  if ($option.length) {
    $option.remove();
    return;
  }
  
  let $tr = $btn.closest('tr');
  let selectionIndex = $btn.closest('td').index();

  let match = $tr.find('td:first').text().trim();
  let result = $th.eq(selectionIndex).text().trim();
  let value = $btn.val();
  $("#cart").append(`<div  data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
  <div class="title">Bet Slip</div>
  <div id="sel"><span></span></div><br />
  <span>Selections:</span><br />
  <button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
  <thead>
    <tr class="ui-widget-header">
      <th>Match</th>
      <th>Home</th>
      <th>Draw</th>
      <th>Away</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arsenal-Chelsea</td>
      <td><input type="button" class="nr" value="1.59" id="option_0_0" /></td>
      <td><input type="button" class="nr" value="3.40" id="option_0_1" /></td>
      <td><input type="button" class="nr" value="2.90" id="option_0_2" /></td>
    </tr>
    <tr>
      <td>Man United-Man City</td>
      <td><input type="button" class="nr" value="2.70" id="option_1_0" /></td>
      <td><input type="button" class="nr" value="2.90" id="option_1_1" /></td>
      <td><input type="button" class="nr" value="2.50" id="option_1_2" /></td>
    </tr>
    <tr>
      <td>Barcelona-Real Madrdid</td>
      <td><input type="button" class="nr" value="3.60" id="option_2_0" /></td>
      <td><input type="button" class="nr" value="3.20" id="option_2_1" /></td>
      <td><input type="button" class="nr" value="1.95" id="option_2_2" /></td>
    </tr>
  </tbody>
</table>

標籤：javascript html jQuery

上一篇：如何比較單選按鈕的值的總和>=3

下一篇：ToggleClasswithFontAwesome不作業