2011-12-14 73 views
0

我怎麼能寫這個在JavaScript或jQuery的:
當我第一次onoff VAR在change功能得到值offoff按鈕變爲一個名爲on按鈕,按下按鈕;
現在,當我按on按鈕時,變量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> 

回答

1

這是在「純」的JavaScript。您將檢索給定輸入的按鈕元素,並根據以前的值更改其值。

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

HERE是代碼。

您的change()函數將不起作用,因爲每次調用函數時都會將「off」分配給onoff變量。如果要使用它,必須將變量定義移動到change()函數之外。

1

我不確定這是對價值的有效使用。然而,這樣的事情:

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

您可以設置事件處理程序無需添加內嵌代碼:

$('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()相同。

1

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