Question

这是我的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>

现在我想使用jQuery选择父级的兄弟按钮。

如果我点击任何<span> li 元素，那么我该如何对<button>执行某些操作我不太了解jQuery选择器。在此先感谢您的帮助。

相关演示JsFiddle

在上面的演示中，如果用户点击“否”按钮，它将变为“正在加载......” 我希望这样：用户点击下拉菜单中的NO-2，然后NO按钮应该变为'loading'

Answer 1

我认为这样的事情可行：

$("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");
   }
})

Answer 2

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

你的JSFiddle有一些奇数代码。 文档就绪事件仅适用于初始页面加载，而您似乎正在使用它来使用循环来模拟加载（这将无法正常工作，因为它将在同一浏览器框架上完成）。此外，文档加载不会返回承诺，因此.then只会导致错误。

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

我已经重新编写了代码，以便各个按钮都有一个data-target引用它们的匹配按钮（在下拉列表或主按钮中）。

e.g。

<button id="Unpublish" data-target="#UnpublishLink" class="btn btn-danger js_publish_btn">No</button>

单击一个按钮时，它会创建一个jQuery对象，同时引用单击的按钮和匹配的对：

// Add any matching button
$el = $el.add($el.data('target'));

然后在两个按钮上进行任何按钮登录（＆＃34;加载......＆＃34;等）。

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/deC37/312/

在jQuery中对父母的兄弟姐妹采取行动

2 个答案: