Question

我有一个JavaScript变量：

var setClickTime = "2000";

我想根据用户的偏好，通过点击按钮为用户提供2000或4000的选择。

允许用户更改此变量的最佳方法是什么？我考虑过有两个按钮，其中一个按钮在点击时会激活该类。这将要求我设置一个if / else语句来根据哪个按钮处于活动状态来更改变量。但我是新手，我不知道最好的方法。

Answer 1

首先，你有一个JavaScript变量，它与jQuery无关。

然后，如果你想要一些简单的东西，没有依赖。这是一个简单的例子：

＆＃13;

var myValue = 2000;
updateOutput();

a.addEventListener('click', function() {
  myValue = 2000;
  updateOutput()
});
b.addEventListener('click', function() {
  myValue = 4000;
  updateOutput()
});


function updateOutput() {
  output.value = myValue;
}

＆＃13;

<button id="a">2000</button>
<button id="b">4000</button>
<input readonly id="output">

＆＃13;

Answer 2

您是否只想要一个按钮事件监听器来更改它：

 <button id="changeBtn">4000</button>

JS

 var setClickTime = "2000";

 $("#changeBtn").click(function() {

    setClickTime = "4000";
 })

Answer 3

只需提供按钮ID并绑定侦听器。

说，你有两个按钮id="setTime2000"和id="setTime4000"，那么你只需要：

HTML代码：

<div>
    <button id="setTime2000">Set time as 2000</button>
    <button id="setTime4000">Set time as 4000</button>
</div>

JS代码：

$(document).ready() {
    var mTime = 2000;  // set the default value of time

    $("#setTime2000").click(function () {
        mTime = 2000;
    }

    $("#setTime4000").click(function () {
        mTime = 4000;
    }

    // ... do something with the variable set
}

Answer 4

纯javascript中的通用答案。

<button class='setTime'>
  2000
</button>

<button class='setTime'>
  4000
</button>

Pure Javascript：

var setClickTime = "";

var buttons = document.getElementsByClassName('setTime')
for (i = 0; i < buttons.length; i++) {
  this.onclick = function setTime(event) {
    setClickTime = event.target.innerHTML;
    alert(setClickTime);
  }
}

小提琴：https://jsfiddle.net/b1vy8ahp/

Answer 5

您可以定义多个radio buttons以获取更多选项（使用相同的名称属性对其进行分组），然后只需delegate或bind change个事件在该radios buttons组中获取所选值。

<input type="radio" name="test" value="2000">2000
<input type="radio" name="test" value="4000">4000
<script>
var setClickTime;
$('input:radio[name=test]').on('change',function()
{
  setClickTime = this.value;
});
</script>

示例：https://jsfiddle.net/DinoMyte/71hgeqnb/1/

允许用户通过单击按钮更改JavaScript变量

5 个答案: