Live Demo

Question

我是Javascript的新手，也是本网站的新手。

我有大约40个按钮，它们都在类“foo”中。我还有一个名为“run”的Javascript函数。如果按下“foo”类中的某个按钮而没有实际设置按钮来运行它，我如何设置Javascript运行？

这甚至可能吗？

Answer 1

是。这是一个使用jQuery的例子。

$('.foo').click(function() {

    run();

});

或者，使用普通的旧JavaScript（参见jsfiddle）：

          //generates a "NodeList" of all buttons
var foo = document.getElementsByTagName('button'),
          //then, we turn it into an actual array
    foo = Array.prototype.slice.call(foo);

foo.forEach(function(button) {

    //check to see if that button has the class "foo"
    if(button.classList.contains('foo')) {
        button.onclick = function() {
             return run();   
        };
    }

});

function run() {
    console.log('run');   
}

你可以用

getElementsByClassName方法

但缺点是，支持它的唯一IE版本是9+（包括所有其他主流浏览器），这很好，如果这是你决定使用的。

Answer 2

Live Demo

您可以将此代码复制+粘贴到您的代码中，并且应该可以正常运行。

var buttons = document.getElementsByClassName('foo');
for (var i = 0; i < buttons.length; i++) {
    addEvent(buttons[i], 'click', run);
}

function addEvent(element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};

Answer 3

没有jQuery：

var foos = document.getElementsByClassName('foo');

for (var i=0; i<foos.length; i++) {
    foos[i].onclick = function() { run() };
}

JSFiddle：http://jsfiddle.net/8AKeP/

Answer 4

有三种简单的方法可以实现这一目标。

首先，你可以使用普通的香草Javascript。不需要外部库。

// Get all buttons
var buttons = document.getElementsByClassName('foo');

// Loop through the buttons
for(var i = 0; i < buttons.length; i++){
    // Tell each button that when it is clicked, call the "run" function.
    buttons[i].onclick = run;
}

其次，您可以在HTML中指定onclick方法。这是一种糟糕的方法，因为它会强制您定义全局方法（可以从任何地方访问的函数），并且还会将您的代码与您的标记联系起来，从而很难在不更改其他方法的情况下更改它。

<!-- Old HTML -->
<button class="foo">Text</button>

<!-- New HTML -->
<button class="foo" onclick="run()">Text</button>

最后，您可以添加非常有用的jQuery库来为您处理。 jQuery提供了一种处理绑定事件，选择元素等的简单方法：

// One line (deconstruction below)
//  $(".foo")    => Find me all elements with a class name of "foo"
//  .on("click", => When those elements are clicked
//  run);        => Call the "run" method.
$(".foo").on("click", run);

最后一种方法，使用jQuery已经成为事实上的标准方式。

Answer 5

我会使用jQuery，例如：

$('.foo').click(function(){
        run();
});

编程更简单。但是，不使用jQuery：

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


function run(){
    alert('hi');
}

for(var i = 0; i < elements.length; i++){
    buttons[i].onclick = function() { run() };
}

Answer 6

试试这个：

var run = function(){
 //your function goes here
}

$(document).on('click', '.foo', run);

仅使用按钮类调用Javascript

6 个答案:

Live Demo