jQuery / JavaScript如何獲取單擊它的按鈕的值，每行按鈕只能激活一個按鈕

Question

我有一個帶有數值或賠率的按鈕列表。 單擊按鈕時，我希望在右側顯示活動按鈕值，但如果按鈕停用該值被替換為新值或為空，則行中只有一個值，因為行中只有一個活動按鈕。

 <div class="bet-grid__pseudo-row"> <div class="bet-grid__cell bet-grid__cell--match-result"> <button value="3.88" class="bet-grid__bet-button" > <div class="bet-grid__bet-button-left">1</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="4.83" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">X</div> <div class="bet-grid__bet-button-right">4.83</div> </button> <button value="5.53" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">2</div> <div class="bet-grid__bet-button-right">1.83</div> </button> </div> <div class="bet-grid__cell bet-grid__cell--double-chance"> <button value="2.63" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">1X</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="1.13" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">12</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="2.02" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">X2</div> <div class="bet-grid__bet-button-right">3.83</div> </button> </div> <div class="bet-grid__cell bet-grid__cell--gg"> <button value="1.03" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">Yes</div> <div class="bet-grid__bet-button-right">2.83</div> </button> <button value="5.33" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">No</div> <div class="bet-grid__bet-button-right">3.83</div> </button> </div> </div>

Answer 1

假設您的活動按鈕 class 只是“活動”。 所以活動按鈕有“bet-grid__bet-button active”類。 並且您的觸發按鈕有一個名為“place-bet-btn”的 class 以下代碼與 jquery 將是您的選擇

 $(document).on('click', '.place-bet-btn', function (){ let values = []; $('.bet-grid__bet-button.active').each(function(){ values.push($(this).val()); }); console.log(values); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bet-grid__pseudo-row"> <div class="bet-grid__cell bet-grid__cell--match-result"> <button value="3.88" class="bet-grid__bet-button active" > <div class="bet-grid__bet-button-left">1</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="4.83" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">X</div> <div class="bet-grid__bet-button-right">4.83</div> </button> <button value="5.53" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">2</div> <div class="bet-grid__bet-button-right">1.83</div> </button> </div> <div class="bet-grid__cell bet-grid__cell--double-chance"> <button value="2.63" class="bet-grid__bet-button active"> <div class="bet-grid__bet-button-left">1X</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="1.13" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">12</div> <div class="bet-grid__bet-button-right">3.83</div> </button> <button value="2.02" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">X2</div> <div class="bet-grid__bet-button-right">3.83</div> </button> </div> <div class="bet-grid__cell bet-grid__cell--gg"> <button value="1.03" class="bet-grid__bet-button active"> <div class="bet-grid__bet-button-left">Yes</div> <div class="bet-grid__bet-button-right">2.83</div> </button> <button value="5.33" class="bet-grid__bet-button"> <div class="bet-grid__bet-button-left">No</div> <div class="bet-grid__bet-button-right">3.83</div> </button> </div> </div> <button class="place-bet-btn">Place Bet</button>