Jquery移除上一个选择的div，并附加当前选择，以便使用按钮每行只允许一个选择

我有下面的代码，其中有一些按钮将选择附加到"推车"；div点击

在第一个脚本中，它的功能是每行只允许一个选择只要单击同一行中的多个按钮。

在第二个脚本中，它的功能是将选择附加到"；推车"；div如果选择已被取消选择，则移除。

当我点击同一行中的多个按钮时，问题就出现了，第一个脚本似乎工作得很好，因为它取消了前一个并激活了当前点击的按钮，第二个脚本应该删除同一行的前一个选择，并更新当前激活按钮的新选择

我如何编辑我的第二个脚本来满足这个功能？

<body style ="margin:10px;">

<div class="cart">

<div id="box" class="boxlit"></div><br>

</div>

<table id="Table1" class="Fixtures-Table">

<thead class="disnon">
<tr>   
<th>League</th>
<th>Home [1]</th>
<th>Draw [x]</th>
<th>Away [2]</th>
<th>Kickoff</th>
</tr>
</thead>

<tr class="items" style="display: table-row;">

<td class="addItem">Almagro-Temperley</td> 
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Guillermo Brown-Santamarina</td> 
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Nueva Chicago-CSD Flandria</td> 
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
</table>

</body>
</html>

在这个脚本中，它的功能是每行只允许一个选择只要单击同一行中的多个按钮。

<script>
$(document).ready(function(){
$('.decimals').click(function() { 
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('active');
} else {
$(this).closest('tr').find('.decimals').not(this)
.removeClass('active').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('active');
}
});
});
</script>

在这个脚本中，它的功能是将选择附加到"；推车"；div如果选择已被取消选择，则移除。

它应该删除同一行中的前一个选择，并为激活的当前按钮添加或更新新的选择

<script>

let $th = $('#Table1 thead th');

$(".decimals").on('click', e => {

let $btn = $(e.target);
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);

let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();

let kickoff = $tr.find('td:last').text().trim();
let match = $tr.find('td:first').text().trim();

let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();

if ($option.length){
$option.remove();

return;
}

$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br>${result}<div class="crtTotal">${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`);


});


</script>


.decimals {
background-color: rgb(31, 31, 31);
color: rgb(255, 255, 255);
border: 2px solid #0e1516;
border-radius: 4px;
font-size: 13px;
padding: 4px 10px;
font-weight: bold;
border-width: 1px;
cursor: pointer;
}
.decimals:hover {
background: rgb(51, 51, 51);
}
.active,
.active:hover {
background: rgb(161, 0, 0);
color: rgb(255, 255, 255);
border-color: rgb(156, 0, 0);

}

设置超时导致问题。我在以下代码中进行了调整：

当更改桩号时，它也在更新，现在我添加了一条细线。

let $th = $('#Table1 thead th');
$('.decimals').click(function(e) { 
let $btn = $(e.target);
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);

let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();

let kickoff = $tr.find('td:last').text().trim();
let match = $tr.find('td:first').text().trim();

let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
var knowit = $(this).closest('.items').find('.addItem').text();
var radiovalue = $(this).attr('value');

if ($('.boxlit .box:contains("'+knowit+'")').length < 1) {

$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div class="crtTotal">${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`);}
else if ($(this).hasClass('active')) {
$('.boxlit .box:contains("'+knowit+'")').remove()
}

else {
$('.boxlit .box:contains("'+knowit+'") .crtTotal').text(radiovalue);
$('.boxlit .box:contains("'+knowit+'") span').text(result);
}
})

.decimals {
background-color: rgb(31, 31, 31);
color: rgb(255, 255, 255);
border: 2px solid #0e1516;
border-radius: 4px;
font-size: 13px;
padding: 4px 10px;
font-weight: bold;
border-width: 1px;
cursor: pointer;
}
.decimals:hover {
background: rgb(51, 51, 51);
}
.active,
.active:hover {
background: rgb(161, 0, 0);
color: rgb(255, 255, 255);
border-color: rgb(156, 0, 0);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style ="margin:10px;">

<div class="cart">

<div id="box" class="boxlit"></div><br>
<div class="shift">
<div>Total Odds: <b id="ct1">0.00</b></div><br>
<div>(N$)Stake: <input id="stake" type ="number" name="stake[]" value="5"> NAD</div><br>
<div>Payout: N$ <b id="payout">0.00</b></div>
<input class="bet1" type="submit" name="submit" value="Bet">
</div>

</div>

<table id="Table1" class="Fixtures-Table">

<thead class="disnon">
<tr>   
<th>League</th>
<th>Home [1]</th>
<th>Draw [x]</th>
<th>Away [2]</th>
<th>Kickoff</th>
</tr>
</thead>

<tr class="items" style="display: table-row;">

<td class="addItem">Almagro-Temperley</td> 
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Guillermo Brown-Santamarina</td> 
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Nueva Chicago-CSD Flandria</td> 
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
</table>

<script>
$(document).ready(function(){
$('.decimals').click(function() { 
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('active');
} else {
$(this).closest('tr').find('.decimals').not(this)
.removeClass('active').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('active');
}
});
});
</script>

<script>
$(document).ready(function(){
$('.decimals').click(function(e) { 
updateoddsnpayout();
})
$('body').on('change', '#stake', function(e){
updateoddsnpayout();
})
var updateoddsnpayout =  function(e) {
let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
let total = values.reduce((a, b) => a * b, values.length > 0 ? 1 : 0);
let eq = 0
let tot = eq += total

$('#ct1').text(tot.toFixed(2)).val()
$('#todds').val(tot.toFixed(2)).val()

var z = 0
var x = parseFloat($('#ct1').text()?? 0);
var y = parseFloat($('#stake').val()?? 0);
var net = z + x * y
$("#payout").text(net.toFixed(2)).val();
$("#inp").val(net.toFixed(2)).val();
}
})

</script>



</body>

据我所知，问题在于删除现有的附加cartdiv。我做了一些事情，希望它能解决您的问题。但是，在我的代码中发生闪烁时，只更新值可能会更好。

let $th = $('#Table1 thead th');
$('.decimals').click(function(e) { 
let $btn = $(e.target);
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);

let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();

let kickoff = $tr.find('td:last').text().trim();
let match = $tr.find('td:first').text().trim();

let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
var knowit = $(this).closest('.items').find('.addItem').text();
var radiovalue = $(this).attr('value');

if ($('.boxlit .box:contains("'+knowit+'")').length < 1) {
setTimeout ( function () { 
$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div class="crtTotal">${value}</div><input type="hidden" name="kickoff[]" value="${kickoff}"/><input type="hidden" name="match[]" value="${match}"/><input type="hidden" name="result[]" value="${result}" readonly/><input type="hidden" name="value[]" value="${value}"/></div>`); },0) }
else if ($(this).hasClass('active')) {
$('.boxlit .box:contains("'+knowit+'")').remove()
}

else {
$('.boxlit .box:contains("'+knowit+'") .crtTotal').text(radiovalue);
$('.boxlit .box:contains("'+knowit+'") span').text(result);
}
})

.decimals {
background-color: rgb(31, 31, 31);
color: rgb(255, 255, 255);
border: 2px solid #0e1516;
border-radius: 4px;
font-size: 13px;
padding: 4px 10px;
font-weight: bold;
border-width: 1px;
cursor: pointer;
}
.decimals:hover {
background: rgb(51, 51, 51);
}
.active,
.active:hover {
background: rgb(161, 0, 0);
color: rgb(255, 255, 255);
border-color: rgb(156, 0, 0);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style ="margin:10px;">

<div class="cart">

<div id="box" class="boxlit"></div><br>

</div>

<table id="Table1" class="Fixtures-Table">

<thead class="disnon">
<tr>   
<th>League</th>
<th>Home [1]</th>
<th>Draw [x]</th>
<th>Away [2]</th>
<th>Kickoff</th>
</tr>
</thead>

<tr class="items" style="display: table-row;">

<td class="addItem">Almagro-Temperley</td> 
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Guillermo Brown-Santamarina</td> 
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
<tr class="items" style="display: table-row;">

<td class="addItem">Nueva Chicago-CSD Flandria</td> 
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td> 

</tr>
</table>

<script>
$(document).ready(function(){
$('.decimals').click(function() { 
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('active');
} else {
$(this).closest('tr').find('.decimals').not(this)
.removeClass('active').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('active');
}
});
});
</script>


</body>

所以我决定使用reduce方法在购物车中添加一个计算总赔率和总支出的部分，在添加第一个选择时，我在计算上遇到了一个小问题，它似乎只在第二次点击按钮后计算，每当我点击另一个按钮时，总赔率在第二个点击时开始计算，当它附加其他选择时，感觉就像是后退了一步

这是购物车的代码

<div id="box" class="boxlit"></div><br>
<div class="shift">
<div>Total Odds: <b id="ct1">0.00</b></div><br>
<div>(N$)Stake: <input id="stake" type ="number" name="stake[]" value="5"> NAD</div><br>
<div>Payout: N$ <b id="payout">0.00</b></div>
<input class="bet1" type="submit" name="submit" value="Bet">
</div>

这是计算选择的总赔率和支出的代码

<script>
$(document).ready(function() {
$('.decimals').click(function(e) { 
let values = $('.crtTotal').map((i, el) => 
parseFloat(el.textContent)).get();
let total = values.reduce((a, b) => a * b, values.length > 0 ? 1 : 0);
let eq = 0
let tot = eq += total
$('#ct1').text(tot.toFixed(2)).val()
$('#todds').val(tot.toFixed(2)).val()

var z = 0
var x = parseFloat($('#ct1').text()?? 0);
var y = parseFloat($('#stake').val()?? 0);
var net = z + x * y
$("#payout").text(net.toFixed(2)).val();
$("#inp").val(net.toFixed(2)).val();
})
})
</script>

我试着追踪问题的来源，它似乎在的setTimeout部分

setTimeout(function() { 
$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div class="crtTotal">${value}</div></div>`);
},0)

它将值附加到购物车中，如何更正我的代码以从第一次点击按钮开始计算？

相关内容

最新更新

热门标签：