對jQuery中父級同級的操作

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選擇父級的同級按鈕。

如果我單擊li元素的任何<span> ，那么如何在<button>上執行一些操作，我不太了解jQuery選擇器。 在此先感謝您的幫助。

相關演示JsFiddle

在上面的演示中，如果用戶單擊“否”按鈕，它將變為“加載中...”。我想要這樣：用戶從下拉菜單中單擊“ NO-2”，那么NO按鈕也應變為“加載中”

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 。

例如

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