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>