javascript - jQuery 中 parent sibling 的操作

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 按钮也应该变为“正在加载”

Answer 1

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

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

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

我修改了您的代码，以便各个按钮都有一个 data-target 引用其匹配按钮(在下拉列表中或主按钮中)。

例如

<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'));

然后，它会在两个按钮上执行任何按钮登录(“正在加载...”等)。

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