Question

$('.inp').click(function(){
  var arr = [];
  var id = $(this).attr('id');
  var value = $(this).val();
  
  if(value == 'empty') {
    $(this).val(id+'ON');
    arr.push(value);
  }
  if(value == id+'ON') {
    arr.splice(arr.indexOf(value), 1);
    $(this).val(id+'OFF');
    arr.push(value);
  }
  if(value == id+'OFF') {
    $(this).val('empty');
    arr.splice(arr.indexOf(value), 1);
  }
  $('.txt').val(arr.join(','));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='empty'>
  <input class='inp' id='y' type='button' value='empty'>
  <input class='inp' id='z' type='button' value='empty'>
</form>

在我的脚本中，我试图让.txt仅获取值ON, OFF，但在部分中

if(value == 'empty') {
    $(this).val(id+'ON');
    arr.push(value);
  }

.txt推送empty而不是新值id+ON

此外，当我点击另一个按钮时，整个.txt将被删除并仅添加点击的按钮值，

例如，如果我点击#x，则.txt应为xON，如果我点击#y，而.txt的值为xON

我希望它为xON,yON，但它只变为yON。

Answer 1

对于每个按钮单击var arr = [];，此语句为您创建一个空数组。这应该从现有的文本字段中填充。

Answer 2

因为你正在使用它：

var value = $(this).val();//the value of the pressed button is always "empty"

而不是：

var value = id+'ON';

或：

arr.push(id+'ON');

您说var value包含"empty"，因此array会推送值empty。

Answer 3

从问题措辞中不完全清楚完整要求是什么，但我认为这可能是您正在寻找的。

＆＃13;

$(function() {
  var list = {};

  $('.inp').click(function() {
    var id = $(this).attr('id');
    var value = $(this).val();
    var newVal = id;

    if (value == 'empty') {
      newVal += 'ON';
      $(this).val(newVal);
      list[id] = newVal;
    }
    if (value == id + 'ON') {
      newVal += 'OFF';
      $(this).val(id + 'OFF');
      list[id] = newVal;
    } else if (value == id + 'OFF') {
      $(this).val('empty');
      list[id] = null;
    }
    console.log(JSON.stringify(list));
    var output = "";
    for (key in list) {
      if (list[key] != null) {
        if (output != "") output += ",";
        output += list[key];
      }
    }
    $('.txt').val(output);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='empty'>
  <input class='inp' id='y' type='button' value='empty'>
  <input class='inp' id='z' type='button' value='empty'>
</form>

＆＃13;

如果这不是你的意思，那么请澄清究竟需要什么。

Answer 4

你可能想要这样的东西：

＆＃13;

$(function() {
  var values = {};

  $('.inp').click(function() {
    var id = $(this).attr('id'),
      value = $(this).val(),
      newVal = id,
      finalVal = '';
    if (value == 'empty') {
      newVal += 'ON';
      values[id] = '';
    } else {
      if (value == (id + 'ON'))
        newVal += 'OFF';
      else
        newVal = 'empty';
      values[id] = value;
    }
    $(this).val(newVal);
    for (key in values) {
      if (values.hasOwnProperty(key) && !!values[key]) {
        finalVal += values[key];
      }
    }
    $('.txt').val(finalVal);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='xON'>
  <input class='inp' id='y' type='button' value='yON'>
  <input class='inp' id='z' type='button' value='zON'>
</form>

＆＃13;

Answer 5

您变为空而不是id+'ON'的原因是因为变量value包含字符串'empty'，因此由值分配的基元。在按值分配的javascript中，与通过引用赋值相反，暗示除非重新分配，否则变量中的值不能更改。要获得新值，您应在value = $(this).val();之前致电arr.push(value);，以便推送更新的value。

因为您在单击处理程序中声明了arr，所以每次单击一个按钮时，都会重新初始化该数组。要获得所需的结果，请将声明var arr = [];移到回调函数之外。

此外，您不应在阻止arr.splice(arr.indexOf(value), 1);中调用if(value == id+'ON')，因为这会将其从arr中删除。而你的历史将不一致。如果您不希望值empty出现在.txt输入中。从块arr.push(value);

中删除if(value == 'empty')

请参阅this pen所述的修改内容。

将值更改并添加到数组中然后显示它

5 个答案: