javascript - 切换按钮的标题

Question

我有一个 HTML 按钮，它显示另一个 div 而不是另一个 div。

我只需要切换按钮的文本：

<input id="blueButton" type="button" value="+ Add a new Team" onclick="
 $('#blueButton').prop('value', 'Hide'); 
 $('#teams').toggle('slow');
 $('#add_block').toggle('slow');">

我需要再次将按钮文本从隐藏更改为原始标题+ Add a new Team

所以按钮标题是+ Add a new Team 如果单击按钮标题更改为hide如果我再次单击按钮它将再次更改为+ Add a new Team。

先感谢您。

score 2 · Accepted Answer

$('#blueButton').val(function(_, value) {
    return value === 'hide' ? '+ Add a new Team' : 'hide' 
});

score 2 · Accepted Answer

$("#blueButton").toggle(
    function(){
        $(this).val("hide");
    }, 
    function(){
        $(this).val("+ Add a new Team");
    }
);

工作演示

score 1 · Accepted Answer

试试这个：

$('#blueButton').click(function() {
    if ($(this).val() == "+ Add a new Team") { 
        $(this).val("Hide")
    } else { 
        $(this).val("+ Add a new Team")
    }
});

编辑：未定义和我说同样的话，但更好的是，使用他的：P

score 0 · Accepted Answer

$('#teams').toggle('slow', function() {
    // 动画完成。
    //在此处更改按钮文本
    $('#blueButton').prop('value', 'show');
  });

这可能不是您需要的确切代码，但它可以提示您可以拥有一个回调函数，该函数可用于在切换完成后执行操作，

score 0 · Accepted Answer

这是jsfiddle

jQ

$("#blueButton").live("click", function() {
    $(this).val() == "+ Add a new Team" ? $(this).val("hide") : $(this).val("+ Add a new Team");
});

javascript - 切换按钮的标题

5 回答 5

Related

Reference