jQuery的。點擊（）.toggle（） - 變化顯示和交換字符

Question

這裏是我的jQuery：

$('.ask').click(function() { 
    $('.addtitle').slideToggle('fast', function() { 
    // Animation complete. 
    }); 
}); 

而我的HTML：

      <p class="ask">+</p> 
           <div class="addtitle"> 
            <p>Give your Idea a great title</p> 
            <form name="input" action="#" method="get"> 
             <input id="title" type="text" name="title" /> 
             <input id="go" type="submit" value="Go" /> 
            </form> 
           </div> 

我有多個。問div的頁面上我只想讓它生成名爲.ask的.next（）div，而不是所有名爲.ask的div。

我也想.toggle（）的 '+' 字符 ' - '

任何人都可以幫助？

Answer 1

可以使用.next()和.toggle()這樣做：

$('.ask').toggle(function() { 
    $(this).text('-').next('.addtitle').slideDown('fast'); 
}, function() { 
    $(this).text('+').next('.addtitle').slideUp('fast'); 
}); 

.next(selector)獲得下一個兄弟，如果它選擇相匹配，如果有可能的東西在中間，然後用.nextAll('.addtitle:first')，.toggle()週期您在每個click事件中提供的功能之間，所以它會交換文本並適當地滑動每次點擊。

Answer 2

$('.ask').click(function() { 
    var $this = $(this); 

    $this.find('.addtitle').slideToggle('fast', function() { 
    // Animation complete. 
    if($this.text() === '-') 
     $this.text('+'); 
    else 
     $this.text('-'); 
    }); 
});