Question

我想将div中的值切换为输入并提交。

到目前为止这是我的代码

HTML

    <form id="forms" action="content.php" method="post">
        <input id="foo" type="hidden" value"">
    </form>

    <div class="btn" value="1" width="40" height="40"></div>
    <div class="btn" value="2" width="40" height="40"></div>

的Javascript

function $(v) { 
    return document.getElementById(v); 
}

var btn = document.getElementsByClassName('btn');

for(i=0; i<btn.length; i++) {

    btn[i].addEventListener('click', function() {

        btn.getAttribute('value') = $('foo').value;

        $('forms').submit();

    }, false);

}

为什么它不起作用？无法点击？ THX

Answer 1

我认为你做错了。您需要将div按钮的值分配给隐藏的foo字段。此外，btn是所有按钮的数组，您可以使用 this 内部事件处理程序回调来引用被单击的按钮，因为此上下文绑定到具有附加事件的元素。我认为以下是你想要的：

(function() {
  function $(v) {
    return document.getElementById(v);
  }


  var btn = document.getElementsByClassName('btn');

  for (var i = 0; i < btn.length; i++) {

    btn[i].addEventListener('click', function() {

      // assign what was clicked (this) to the foo hidden value
      $('foo').value = this.getAttribute('value');
      // now submit
      $('forms').submit();

    }, false);

  }
}());

编辑：使用Array的forEach的示例（我假设您可以在执行环境中使用 getElementsByClassName 方法。

(function() {
  function $(v) {
    return document.getElementById(v);
  }


  var buttons = document.getElementsByClassName('btn');

  // each element of the array is passed to the provided callback
  buttons.forEach(function (button) {

    button.addEventListener('click', function() {

      // assign what was clicked (this) to the foo hidden value
      $('foo').value = this.getAttribute('value');
      // now submit
      $('forms').submit();

    }, false);

  });

}());

Answer 2

我不确定这个的目的是什么，但如果你坚持使用div作为单选按钮或w.e 使用数据属性，

喜欢这样

function(argument)

你可以使用jquery来获取这样的属性：

<div id="div1" data-value="1"></div>

或

var div1 = $('#div1').data('value')

on click listeners with jquery

var div1 = $('#div1').attr('data-value');

Answer 3

首先，我认为div不应该有value属性。也许你应该把它切换到data-value，这可以在jQuery中轻松使用：

<form id="forms" action="content.php" method="post">
    <input id="foo" type="hidden" value"">
</form>

<div class="btn" data-value="1" width="40" height="40"></div>
<div class="btn" data-value="2" width="40" height="40"></div>

至于javascript：

$('.btn').on('click', function() {
    $(this).data('value', $('#foo').val());
    $('#forms').submit();
});

使用class属性切换Div值

3 个答案: