jquery在觸發器中切換跨度文本

我很想知道這一點，我想。我是新來的JavaScript，但這是我的情況。jquery在觸發器中切換跨度文本

我有一些默認隱藏的列表。點擊標題顯示列表。我希望標題中的跨度從「+」更改爲「 - 」，分別隱藏和顯示。

我遇到的問題是兩個標題的跨度更改，而不是被單擊的那個。

<div> 
    <h3 class = "trigger"><span>+</span>Heading 1</h3> 
    <ul class = "toggle"> 
     <li>Line One</li> 
     <li>Line Two</li> 
     <li>Line Three</li> 
    </ul> 
</div> 
<div> 
    <h3 class = "trigger"><span>+</span>Heading 2</h3> 
    <ul class = "toggle"> 
     <li>Line One</li> 
     <li>Line Two</li> 
     <li>Line Three</li> 
    </ul> 
</div>

這裏是隨附的JavaScript。

$(".trigger").click(function(){ 
    $(this).next(".toggle").slideToggle(function(){ 
    $('span').text(
     $('.toggle').is(':visible') ? '-' : '+'); 
    }); 
});

這裏是一個jsfiddle

來源

2012-04-03 Todd J.

試試這個：

$(".trigger").click(function(){ 
    var trigger = $(this); 
    $(this).next(".toggle").slideToggle(function(){ 
    trigger.children('span').text(
     $('.toggle').is(':visible') ? '-' : '+'); 
    }); 
});

來源

2012-04-03 16:35:29

謝謝你的幫助:)這工作完美。 – 2012-04-03 16:57:05

您需要明確告訴JavaScript來與該標題相關做着

http://jsfiddle.net/sWvbq/5/

一種方法只能躲在跨度:)

$(".trigger").click(function(){ 
    var _that = $(this); // remember parent 
    $(this).next(".toggle").slideToggle(function(){ 
    _that.find('span').text(// only toggle span related to parent 
     $('.toggle').is(':visible') ? '-' : '+'); 
    }); 
});

來源

2012-04-03 16:35:05

嘗試：

$(".trigger").click(function(){ 
    var $this = $(this); 
    $this.next(".toggle").slideToggle(function(){ 
     $this.find("span").text($(this).is(':visible') ? '-': '+'); 
    }); 
});

演示：http://jsfiddle.net/N8YVD/

來源

2012-04-03 16:36:27

嗨凱文，你知道爲什麼以下失敗的工作？ http://pastebin.com/9gJABGv7 - 非常感謝。 – Robin 2012-12-21 14:36:21

你是非常接近:)這裏是更新jsfiddle（有到達它的多種方法）。如果您訪問slideToggle內部的$('span')，您將訪問所有跨度，這就是爲什麼它會同時改變。你只需要訪問點擊標題的範圍，所以你必須回溯到它。

$(".trigger").click(function(){ 
    $(this).next(".toggle").slideToggle(function(){ 
    $(this).prev().children('span').text(
     $('.toggle').is(':visible') ? '-' : '+'); 
    }); 
});

來源

2012-04-03 16:37:26 realshadow

謝謝你的解釋，它爲我解決了一些問題。我可以理解爲什麼這樣做，我只是不知道如何抓住我點擊的東西的孩子。 – 2012-04-03 17:03:54

在jQuery中當你使用。運算符，您要求jQuery使用CLASS切換獲取所有DOM元素。如果你想要改變，你可以要求一個特定的ID。將它們命名爲唯一，並使用$（'＃IDHERE'）訪問，您將得到一個更新，另一個將保持不變。

來源

2012-04-03 16:37:50

jquery在觸發器中切換跨度文本

回答

相關問題