如何更改 div 中的可见按钮？

Question

大家好，我有一些代码：

<div class="a">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>
<div class="b">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>

当我使用 $("button.btn.approve").addClass("disabled"); div a 和 div b 中的按钮被禁用。如何仅从 div a?

禁用按钮批准

Answer 1

Select 按钮仅在 div 内有 class a 通过更新选择器。

$("div.a button.btn.approve").addClass("disabled");

Answer 2

尝试这样的事情：

 $(".a button.btn.approve").addClass("disabled");

Answer 3

您只需更改您的选择器并使其更通用以包括您的 .a class:

$(".a > .btn-group > button.btn.approve").addClass("disabled");`

Answer 4

.b>.button.btn.approve

您需要定义确切的元素，因为

button.btn.approve

匹配所有按钮，您也可以添加额外的 class 或 ID

Answer 5

如果点击按钮，只想给同组按钮添加class？

如果是，请执行此操作：

$('.btn-group .btn').click(function(){
    $(this).parent().children('.btn').addClass('disabled');
});

.disabled {
  color: #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>
<div class="b">
    <div class="btn-group">
        <button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
        <button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
        <button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>

    </div>
</div>

如何更改 div 中的可见按钮？

How to change visible button in div?

html

javascript

css

jquery

selector