2015-08-28 58 views
2

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

<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

回答

0

試試這個代碼:

$(document).ready(function() { 

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

}); 
0

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

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

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

0

您可以使用.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>

0

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

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

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