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>按钮来单独突出显示，所以删除#group选择器，只需突出显示每个<p>中的按钮。

因此，在此示例中，我可以突出显示Medium $3.50，然后单独突出显示Soy。

Answer 1

尝试仅选择父<p>的孩子，而不是所有#group1 button。

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

这样，您只访问父元素中button的子集，而不是在整个DOM上运行查询。

Answer 2

您可以使用.siblings选择所有同级元素，以便找到所点击的.btn元素的所有同级元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用：contains（）选择器来标识单击的按钮。然后使用siblings（）选择器。

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

更好的方法是为每个组使用不同的类。但上面的内容应该让你前进。

Answer 4

试试这段代码：

  $(document).ready(function () {

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

});

区分按钮组

4 个答案: