區分按鈕羣

Question

是否可以區分一組按鈕？給定以下按鈕。

<div id="slideout_inner"> 
<h2>Select Size</h2> 
<p id="group1"> 
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button> 
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button> 
<button type="button" class="btn btn-default btn-lg">Large $4.50</button> 
</p> 
<h2>Select Milk</h2> 
<p> 
<button type="button" class="btn btn-default btn-lg">Full</button> 
<button type="button" class="btn btn-default btn-lg">Trim</button> 
<button type="button" class="btn btn-default btn-lg">Soy</button> 
</p> 

<button type="button" class="btn btn-primary btn-lg btn-block">Done</button> 
<button type="button" class="btn btn-danger btn-lg btn-block  cancelOrder">Cancel</button> 
</div> 
</div> 

如果我這樣做，我可以在group1

$('#group1 button').on("click", function(){ 
    $('#group1 button').removeClass("btn-primary").addClass("btn-default"); 
    $(this).removeClass("btn-default").addClass('btn-primary'); 
    }) 

彰顯選擇按鈕下面我預計按鈕列表是動態的，所以我想選擇與<p>按鈕分別突出，從而刪除＃組選擇器，並突出顯示每個<p>中的按鈕。

因此，在此示例中，我可以突出顯示Medium $3.50，然後獨立突出顯示Soy。

Answer 1

試試這個代碼：

$(document).ready(function() { 

    $("button").on("click", function() { 
     $(this).siblings("button").removeClass("btn-primary").addClass("btn-default"); 
     $(this).removeClass("btn-default").addClass('btn-primary'); 
    }); 

}); 

Answer 2

請嘗試僅選擇父母的子女<p>而不是全部#group1 button s。

$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default"); 

這樣，你只能訪問的button秒的子集的父元素中，而不是運行在整個DOM查詢。

Answer 3

您可以使用.siblings選擇所有的兄弟元素，所以你可以找到點擊.btn元素的所有兄弟元素：

$("p .btn").on("click", function() { 
 
    $(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default"); 
 
    $(this).removeClass("btn-default").addClass('btn-primary'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideout_inner"> 
 
<h2>Select Size</h2> 
 
<p id="group1"> 
 
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button> 
 
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button> 
 
<button type="button" class="btn btn-default btn-lg">Large $4.50</button> 
 
</p> 
 
<h2>Select Milk</h2> 
 
<p> 
 
<button type="button" class="btn btn-default btn-lg">Full</button> 
 
<button type="button" class="btn btn-default btn-lg">Trim</button> 
 
<button type="button" class="btn btn-default btn-lg">Soy</button> 
 
</p> 
 

 
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button> 
 
<button type="button" class="btn btn-danger btn-lg btn-block  cancelOrder">Cancel</button> 
 
</div> 
 
</div>

Answer 4

您可以使用：包括（）選擇以確定哪些按鈕被點擊。然後使用兄弟（）選擇器。

$("button:contains('Small $2.50')").siblings() 

更好的方法是使用不同的類爲每個組。但上述應該讓你去。