Question

我有一个动态更改id（main-btn-0到main-btn-3）的按钮。我想要它，当点击时，触发点击与test-btn-X id对应的另一个按钮。

所以我这里总共有5个按钮。一个＆＃34;主要＆＃34;动态更改id的按钮，以及带有ID的4个按钮＆＃39; test-btn-0到test-btn-3。

因此，当主按钮的ID为main-btn-0时，它应触发点击test-btn-0，main-btn-1触发test-btn-1，依此类推。

这是我到目前为止所尝试过的，但不起作用：

$(document).on('click', '#main-btn-0', function(){
    $('#test-btn-0').click();
});

$(document).on('click', '#main-btn-1', function(){
    $('#test-btn-1').click();
}); 

$(document).on('click', '#main-btn-2', function(){
    $('#test-btn-2').click();
}); 

$(document).on('click', '#main-btn-3', function(){
    $('#test-btn-3').click();
});

我在这里缺少什么？

另外，有没有办法让1个函数代替4？

感谢。

Answer 1

你可以给按钮一个＆＃34; main-btn＆＃34;相反，然后是＆＃34; 1＆＃34;，＆＃34; 2＆＃34;的数据ID。等。

<button class="main-btn" data-id="1">main 1</button>

然后代码就像：

$(document).on('click',".main-btn",function(){
    $(".test-btn-" + $(this).data("id")).click();
})

这是一个测试： http://jsfiddle.net/xyn4k784/

Answer 2

只要你知道dom准备好之后你知道它们是什么就会发生id变化的事实：在这种情况下，你可以在click事件中安装一个事件监听器，然后在函数内部，检查点击按钮时的实际ID。

要阅读ID，您必须使用attr：

$(this).attr("id");

如果您希望能够随时选择按钮，您可以使用不同的方式查找它们，所有ID只是最琐碎的选择器，但到目前为止不是唯一的选择器。

例如，您可以为每个人提供一个特定的课程。我会在检查css选择器的规范后立即添加其他几个。

编辑：例如$('*[id|=main]')应匹配任何ID以＆＃34; main＆＃34;开头的元素。然后是＆＃39; - ＆＃39;。

如何在动态更改按钮上触发事件？

2 个答案: