区分按钮群

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

更好的方法是使用不同的类为每个组。但上述应该让你去。