切换按钮 Jquery 的值答案

【问题标题】：toggle value of button Jquery切换按钮 Jquery 的值
【发布时间】：2013-05-26 20:31:51
【问题描述】：

我想使用 jquery 切换功能来切换按钮的值，但它不起作用

我的按钮如下：

<input type="button" value="Click to send message"  id="send_message_button">

现在我想用 jquery 将 Click to send message 切换到 Click to hide message，这可能吗？

【问题讨论】：

toggle 用于在两个实体之间切换。但是在这里您只想通过单击将按钮的值更改为其他值。所以下面的答案很好。找到 jQuery 切换 here
是的，这是可能的，但我认为 jquery toggle 不是解决这个问题的最佳方法，因为你想要更改的属性是值而不是类。

标签： jquery html-input

【解决方案1】：

你好试试这个：http://jsfiddle.net/zander_pope/udu5cchh/

$(function () {
    $('.button').on('click', function (e) {
        if (!$('.dd').val()) {
            $('.dd').val("relevance");
        } else {
            $('.dd').val("");
        }
    });
});
$(function () {
    $('.button').on('click', function (e) {
        $('.search').click();
    });
});

这将起作用并且可以适应您的代码。

【讨论】：

【解决方案2】：

我不确定这是否是一个很好的解决方案，但将其作为其中一种情况来阅读。 JsFiddle

添加数据属性：

<input type="button" value="Click to send message" data-value="Click to hide message"  id="send_message_button" />

JS代码：

$('#send_message_button').on('click', function(){
    $(this).val((function(input) {var alt = $(input).data('value'); $(input).data('value', $(input).val()); return alt;})(this))  
});

【讨论】：

【解决方案3】：

我认为切换功能有点棘手。我为你创建了一个小提琴，请检查。

http://jsfiddle.net/8udzL/

$(document).ready(function () {
$('#send_message_button').click(function () {

    if ($('#send_message_button').val() == "Click to send message") {
        $('#send_message_button').val("Click to hide message");
    } 
    else
    {
    $('#send_message_button').val("Click to send message");
    }
});

});

【讨论】：

写的太多了。请参阅 Nix 的答案。

【解决方案4】：

如果你的意思是当你再次点击它时它会恢复。试试这个：

var clicked = false;
$('#send_message_button').click(function(){
    $(this).val("Click to "+ (clicked? "send": "hide") + " message");
    clicked = !clicked;
});

【讨论】：

非常漂亮整洁的答案。

【解决方案5】：

<input type="button" value="Click to send message" OnClick="toggle()"  id="send_message_button">

function toggle(){
    $('#send_message_button').val("Click to hide message");  
}

【讨论】：

Toggle 暗示 两种状态之间的交替，但您的解决方案不会将值更改回原始值。

【解决方案6】：

请看http://jsfiddle.net/QcUtc/

<input type="button" value="Click to send message"  id="send_message_button">

$('#send_message_button').click(function(){
    $(this).val("Click to hide message");  
});

【讨论】：