堆棧內存溢出
  簡體   English   中英

Jquery 刪除先前選擇的 div 和 append 當前選擇以允許使用按鈕每行僅選擇一個

[英]Jquery remove div of previous selection and append current selection to allow only one selection per row using buttons

 原文  2022-08-01 21:54:56  0   3    javascript/ html/ jquery/ css

問題描述

我有以下代碼，其中包含 append 選擇到“購物車”div 的按鈕

在第一個腳本中，它的 function 是當單擊同一行中的多個按鈕時，每行只允許一個選擇。

在第二個腳本中，它的 function 是 append 對“購物車”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>

在此腳本中，其 function 是為了在單擊同一行中的多個按鈕時每行只允許一個選擇。

<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>

在此腳本中，它的 function 是 append 對“購物車”div 的選擇，如果未選擇選項，則刪除。

它應該刪除同一行中的先前選擇和 append 或更新當前活動按鈕的新選擇

<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);
    
}

3 個解決方案

解決方案1
 1  2022-08-02 09:01:03

據我了解，問題在於刪除現有的附加購物車 div。 我做了一些事情，希望它能解決你的問題。 但最好只更新值，因為我的代碼閃爍發生。 

 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>

解決方案2
 1 已采納  2022-08-02 22:11:34

設置的超時導致了問題。 我在以下代碼中對其進行了調整：

更改股份時，它現在也在更新，我添加了一條小線。 

 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>

解決方案3
 0  2022-08-02 17:17:52

所以我決定添加一個使用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) }

它將值附加到購物車，如何更正我的代碼以從第一個按鈕單擊開始計算？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 網頁的單選按鈕網格中的每列和每行僅允許一個選擇 自定義jQuery復選框僅允許一個選擇 獲取和append電流選擇 使用Javascript在asp.net中的每一行中只允許在Gridview中選擇一個單選按鈕 jQuery-HTML div選擇 - 只選擇一個 只允許選中1個復選框 單選按鈕返回上一個選擇 jQuery One Div，兩個url，使用CSS創建選擇框 每行的Ui-Grid單選按鈕選擇 jQuery div選擇？ 懸停時
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM