javascript - Changing the text value of a button

Question

I have a problem with my toggle. I have found similar posts but none that I truly understood.

I want the button to change text to "Project Info -" when clicked and when clicked again revert back to "Project Info +"

Here's the problem (the project info button) -> http://marcuspedersen.com/oyafestivalen.html

The code:

jquery

$('#toggle').click(function() {
    $('#workinfo').slideToggle (300, 'linear'); 
});

The button

<input type="button" id="toggle" value="Project Info +"/>

Answer 1

我建议：

$('#toggle').click(function(e){
    // you may also want:
    // e.preventDefault();
    // depending what else you're doing, and how you're doing it
    $(this).val(function(i,v){ return v == 'Project Info +' ? 'Project Info -' : 'Project Info +'; });
});

JS 小提琴演示。

顺便说一句，如果您对同一个元素/jQuery 对象执行多个操作，那么缓存该对象并随后将缓存的对象用于将来的操作是明智的。

请记住，我在click()这里使用了，而不是toggle()，因为后者在 jQuery 1.9 中已被弃用。

参考：

• click().
• toggle().

Answer 2

尝试这个

$('#toggle').click(function() {
    $('#workinfo').slideToggle (300, 'linear');
    $(this).val( $(this).val() == 'Project Info +' ? 'Project Info -' : 'Project Info +'); 
});