Javascript 对家长采取行动'；jQuery中的兄弟

以下是我的html代码：

<div class="btn-group js_publish_management>
    <button class="btn btn-danger js_publish_btn">Not Published</button>
    <button class="btn btn-success js_publish_btn">Published</button>
    <button type="button" t-attf-class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#" class="js_publish_btn">
                <span class="css_unpublish">Unpublish</span>
                <span class="css_publish">Publish</span>
            </a>
        </li>
    </ul>
</div>

---

我认为类似的方法可以奏效：

$("li span").click(function() {
   if ($(this).hasClass("css_unpublish")) {
       var buttons = $(this).closest(".btn-group").find("button.classForPublish");
   } else {
       var buttons = $(this).closest(".btn-group").find("button.classForUnpublish");
   }
})

假设您也可以更改HTML，那么有更好的方法来同步按钮对。用
数据-
属性装饰它们可能是使代码数据受驱动的最简单方法

您的JSFIDLE有一些奇怪的代码。document ready事件仅应用于初始页面加载，而您似乎正在使用它来使用循环模拟加载（这将无法在同一浏览器框架上完成）。此外，文档加载不会返回承诺，因此
。那么
只会导致错误

我用loadData函数替换了负载模拟，该函数返回一个
promise
，并在3秒钟后完成

我已经修改了您的代码，使各种按钮都有一个
数据目标
，指向它们的匹配按钮（在下拉列表中或主按钮中）

e、 g

然后在两个按钮上执行任何按钮登录（“加载…”等）

$el.button('loading');
loadData().then(function (result) {
    $el.toggleClass("css_unpublished css_published");
    $el.button('reset');
}).fail(function (err, data) {
    $el.button('reset');
});

jsidle:
为什么
.parents（.btn group”）
而不是
。最近的（.btn group”）
家长可以返回多个按钮……这将返回所有按钮……他想要类似的按钮，如“NO-2”的“NO”和“Yes2”的“Yes”我编辑了我的答案，你只需要将这些classForUnpublish和classForPublish添加到你的HTML中，按钮和链接是成对的。单击其中一个应更新两个元素（一个链接和一个按钮）的状态。这样做不行。最初的问题还有一些与标题没有直接关系的额外问题用例非常简单，但是你对类名的错误使用使它变得很困难。您应该始终保持一种约定，以便轻松地分离和遍历DOM。您可以更改DOM吗？@Vijay为什么不可以。坦率地说，我是新来的！你能导游吗？提前谢谢
// Add any matching button
$el = $el.add($el.data('target'));

$el.button('loading');
loadData().then(function (result) {
    $el.toggleClass("css_unpublished css_published");
    $el.button('reset');
}).fail(function (err, data) {
    $el.button('reset');
});