單擊事件切換所有類而不是正確的塊

我有一些摺疊/摺疊塊，第一個塊打開，第二個/第三個關閉。他們按照我想要的方式打開和關閉，但我無法弄清楚如何修改該功能，以便正確塊的正負圖標發生變化。此刻，無論我打開還是關閉，都同時變化。單擊事件切換所有類而不是正確的塊

如何改變功能，以便切換的塊更新正確的圖標？

function toggleDiv(divId) { 
$("#"+divId).toggle(); 
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus') 
}

HTML

<p><a href="javascript:toggleDiv('features');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></a></p> 
<div id="features"> 
    Features 
</div> 

<p><a href="javascript:toggleDiv('specifications');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></a></p> 
<div id="specifications"> 
    Spec 
</div> 

<p><a href="javascript:toggleDiv('faq');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></a></p> 
<div id="faq"> 
    FAQ 
</div>

來源

2015-06-25 Justin B

我認爲這個鏈接可以幫助你http://stackoverflow.com/a/31041401/4696809 –

讓我說沒有...只是沒有開始！

在您的標記添加目標的數據屬性：

<div class="product-toggle" data-target="features"> 
    <p> 
    <span class="icon icon-plus" aria-hidden="true"></span> 
    <span class="toggle-title">Features</span> 
    </p> 
</div> 
<div id="features"> 
    Features 
</div>

附加一個監聽器product-toggle類，像這樣：

$(document).on('click', '.product-toggle', function() { 
    var target = this.dataset.target; 
    $('#'+target).toggle(); 
    $(this).find('span.icon').toggleClass('icon-plus icon-minus'); 
});

JsFiddle

來源

2015-06-25 09:35:23

謝謝，這很好。你可以告訴我在代碼中毫無用處！我只需要解決一件事......在點擊我發送到頁面頂部時，我猜想是因爲函數（？）中的井號標籤。無論如何阻止點擊時跳到頁首並保持在頁面上的相同位置？ –

@JustinB你是正確的，用按鈕或div替換錨點標籤可以解決這個問題。 –

更新了用div替換錨標記的答案。 –

注：行內的事件都望而卻步;您應該使用jQuery點擊處理程序，因爲您已經在使用jQuery。

例如（Demo）：

$('a.product-toggle').click(function(e){ 
    $(this).closest('p').next('div').toggle(); 
    $(this).find('span.icon').toggleClass('icon-plus icon-minus') 
})

如果你需要使用內聯事件調用，

您需要更改第二行以獲取圖標當前元素

function toggleDiv(divId) { 
    $("#"+divId).toggle(); 
    $("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus') 
}

因爲

$('.product-toggle span.icon')

選擇所有<div>s

或通過this與click事件。

<p><a href="javascript:toggleDiv('features',this);"...

和

function toggleDiv(divId,currEl) { 
    $("#"+divId).toggle(); 
    $(currEl).find('span.icon').toggleClass('icon-plus icon-minus') 
}

來源

2015-06-25 09:31:04

雖然這回答了這個問題，但我認爲整個問題可以通過事件監聽器以更優雅的方式解決。 –

是的，@SargoDarya，我正在編輯jQuery處理程序。 –

這裏是我想出了這是一個更方便的解決方案，並沒有在href中使用JavaScript。

$('.product-toggle').on('click', function(evt){ 
    // This will be set to the context of the current element 
    $("#"+this.name).toggle(); 
    $(this).find('.icon').toggleClass('icon-plus icon-minus'); 
});

這要求您給a標籤一個名稱，而不是直接調用該函數。下面是小提琴的鏈接：http://jsfiddle.net/ttpfzrgL/

來源

2015-06-25 09:40:42

試試這個

function toggleDiv(divId) { 
     var idSelector = "#"+divId; 
     $(idSelector).toggle(); 
     $('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus'); 
    }

編碼快樂:)

來源

2015-06-25 09:45:44 dreamweiver

單擊事件切換所有類而不是正確的塊

回答

相關問題