Question

我看到了这个question，第一个答案对于提出的问题非常有用......但是如果我想要使用不同的命名元素重复使用代码呢？

让我具体一点。

在我的代码中（网站上的多个页面都调用了相同的file.js）我希望有各种内部“链接”，我现在写的是：

<a onclick="testFunction('targetA');">test A</a>
<a onclick="testFunction('targetB');">test B</a>

然后相应地调用javascript。这样做的好处是可以反复使用相同的JS，而无需为每个“目标”编写一个JS。除了我每次都要输入上面的混乱之外，缺点是，根据那个人的回答，这不是正确的做事方式。

所以有一种“正确的方法”我可以做这样的事情（实现这是伪代码）：

<a id="test.A">test A</a>
<a id="test.B">test B</a>

并且不必在JS文件中明确定义test.A与test.B（vs C，D，E ...）？例如，JS可以注册到“#test”但解析.X并将其作为变量进行操作？

或者????

Answer 1

我不知道这是否被夸大了，也许我不理解你想要什么 - 但是

var tests = document.querySelectorAll('[id^="test."]');
[].forEach.call(tests, function(a) {
   a.addEventListener('click', function(e) {
      alert(e.target.id.split('.')[1]+' clicked');
   }, false);
})

会说“ B点击”等。这会定位您想要的所有test.*个ID。很明显，您不必在点击事件中使用id任何内容，它可能是一个包含值或其他内容的属性。

演示 - ＆gt;的 http://jsfiddle.net/sbeyer8f/

Answer 2

如果您要跟踪单击的链接，可以使用数据属性（或任何属性，但数据更简单）并检查单击哪一个。如果这不是您要求的，请随时澄清！

<a class="test" data-target="a">test A</a>
<a class="test" data-target="b">test B</a>

(function(document){
    var test = document.getElementsByClassName('test');

    var clickLink = function(){
        var target = this.dataset['target'];
    };

    for(var i = 0; i < test.length; i++){
        test[i].addEventListener('click', clickLink);
    }
})(document);

JS事件注册而不是onclick ...但如何使其可重用？解析ID？

2 个答案: