Различают группу кнопок

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

Вы можете использовать: содержит() селектор, чтобы определить, какие нажата кнопка. а затем используйте селектор siblings().

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

Лучшим подходом было бы использование разных классов для каждой группы. Но выше вы должны идти.