Question

假设我有几个动态生成ID的表单

<form id = "1">
    employer: <input type = "text" />
</form>

<form id = "2">
    employer: <input type = "text" />
</form>

<form id = "3">
    employer: <input type = "text" />
</form>

我想创建一个与每个表单关联的按钮，这样当我单击该按钮时，表单将被隐藏。所以onclick函数应该将id作为参数。怎么做到这一点？

我尝试了以下

<script type="text/javascript">
var inputElement = document.createElement('button');
inputElement.addEventListener('click', function(){
    hideForm(1);
});
document.body.appendChild(inputElement);
</script>

使用下面定义的hideForm

<script>
function hideForm(id){
    $("#id").hide();
}
</script>

Answer 1

当您引用表单elemnt时，您并不真正需要ID

例如：

$('form').each(function(i){
   var $form = $(this),
       $button = $('<button>',{text:'Hide form # '+(i+1)}).click(function(){
            $form.hide()
       });

   $('body').append( $button);
})

Answer 2

您可以在jQuery选择器中使用字符串连接：

function hideForm(id){
    $("#"+id).hide();
}

Answer 3

我想，这就是你要找的东西。

HTML：

<form id="1">
  employer:
  <input type="text" />
  <button>Hide</button>
</form>

<form id="2">
  employer:
  <input type="text" />
  <button class="hide-button">Hide</button>
</form>

<form id="3">
  employer:
  <input type="text" />
  <button>Hide</button>
</form>

JavaScript：

$('form').on('submit', function(e) {
    e.preventDefault();
    $(this).hide();
});

JSFiddle：

https://jsfiddle.net/nikdtu/pp6j8zvx/

如何通过单击按钮

3 个答案: