Question

我怎么能用javascript或jQuery写这个：
当我第一次按下按钮时，onoff函数中的change变量获得值off，off按钮变为名为on的按钮;
现在当我按下on按钮时，var onoff获取值on，按钮再次变为off按钮。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
    function change( inputId ) { 
        /* ... do something with inputId ... */
        var onoff = 'off';
        console.log( onoff );
    }
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>one:</td><td><input name="one" id="one" /></td>
            <td><input type="button" id="b_one" value="off" onclick="change('one')"></td>
        </tr>
        <tr>
            <td>two:</td><td><input name="two" id="two" /></td>
            <td><input type="button" id="b_two" value="off" onclick="change('two')"></td>
        </tr>
    </table>
    <br /><br /><input type="submit" value="ok"/></div><br />
</form>
</body>
</html>

Answer 1

这是“纯粹的”JavaScript。您将检索给定输入的按钮元素，并根据之前的值更改其值。

function change( inputId ) { 
    var button = document.getElementById('b_' + inputId);
    button.value = button.value === 'off' ? 'on' : 'off';
}

HERE 是代码。

您的change()函数无效，因为每次调用函数时，'off'都会分配给onoff变量。如果要使用变量定义，则必须将变量定义移到change()函数之外。

Answer 2

我不确定这是否有效使用价值。但是，像这样：

function Change(id) {
    if( $("#"+id).val() == "on") {
        // code for on
        $("#"+id).val("off"); //switch value
    }
    else {
        // code for off
        $("#"+id).val("on"); //switch value
    }
}

Answer 3

您可以在不添加内联代码的情况下设置事件处理程序：

$('input[type="button"]').on('click', function () {
    var onoff = this.value;

    //this sets the value of the input to its current opposite
    this.value = (this.value == 'off') ? 'on' : 'off';
});

以下是演示：http://jsfiddle.net/df4pu/

这也为每个type=button输入设置了事件处理程序，因此您可以减少重复代码。

请注意，.on()是jQuery 1.7中的新增内容，在这种情况下与使用.bind()相同。

Answer 4

HTML

<input type="button" id="btnOn" value="Off" />

的Javascript

var status = "off"
$("#btnOn").click(function () {

    if ($(this).val() == "On") {
        $(this).val("Off")
        status = "Off";
    }
    else {
        $(this).val("On")
        status = "On";
    }
    alert("status : " + status);
});

以下是示例：http://jsfiddle.net/JCABs

我怎么能改变按钮名和变量值？

4 个答案: