因此,我有一个带有按钮和比赛信息的表,当我单击特定按钮时,我try 编写代码,它将我的 Select 添加到div(cart)中.例如,如果我单击第一个按钮(1.59),它应该将比赛名称添加到cart(阿森纳-切尔西)、相关 Select (阿森纳)或标题名称(主场)和值(1.59),按此顺序

阿森纳-切尔西

此外,我需要它的功能,每当我重新点击相同的按钮(1.59),它应该能够删除购物车的 Select

$(".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-addreslayui-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>

推荐答案

您需要使用DOM遍历来查找与单击的按钮相关的内容.要获取地点,您可以获取包含td的索引,然后检索包含文本的匹配thead th.要获得匹配,可以获取当前行中前td个的文本.

添加新内容时,不要使用id个属性,因为它们必须是唯一的.

还要注意,在下面的示例中,我修复了HTML中的一些问题,例如额外的</td>个标记和删除<chr />个标记,而<chr />个标记并不存在.

let $th = $('#choose-addreslayui-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 class="cart" 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-addreslayui-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相关问答推荐

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

类型脚本中只有字符串或数字键而不是符号键的对象

yarn安装一个本地npm包,以便本地包使用main项目的node_modules(ckeditor-duplicated-modules错误)

为什么我的列表直到下一次提交才更新值/onChange

当点击注册页面上的注册按钮时,邮箱重复

为什么!逗号和空格不会作为输出返回,如果它在参数上?

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

获取Uint8ClampedArray中像素数组的宽度/高度

如何解决useState错误—setSelect Image不是函数''

Eval vs函数()返回语义

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

为什么在函数中添加粒子的速率大于删除粒子的速率?

如何在Jest中模拟函数

Django模板中未加载JavaScript函数

无法向甜甜圈图表上的ChartJSImage添加可见标签

在执行console.log(new X())时记录一个字符串

在不使用AJAX的情况下将JavaScript数组值传递给Laravel控制器?

观察子组件中的@Output事件emits 器?

JavaScript structuredClone在Chrome/Edge中获得了非法调用,但在NodeJS中没有