Question

我尝试使用javascript函数在我的表单中单击id为'divResults'的所有div，但显然它不起作用，没有错误但没有任何漏洞。请指教。感谢。

 <a href="javascript:clickAllDivs()">Expand All</a>  |  <a href="javascript:clickAllDivs()" >Collapse All</a>

JavaScript：

     function clickAllDivs() {
                         var els = document.getElementsByTagName('div');
                         var i = els.length; while (i--)
                             if (els[i].id == 'divResults' ) {
                             //alert("I am in"); //Check if div is eating this function
                             els[i].click();
                         }
                     }

Answer 1

您似乎对id感到困惑。

id 唯一 。只有一个元素具有特定的id，这就是为什么您的代码不能从根本上开始工作的原因。

您可能正在寻找class，而不是id。

阅读this article，了解有关两者之间差异的更多信息。

至于您的当前错误，如果我没有正确记住，.click()不是本机JavaScript函数。您使用的是jQuery等JavaScript库吗？

Answer 2

首先，这没有任何意义，因为您只应该在具有给定ID的页面中有一个对象，但是您正在尝试查找具有相同ID的所有对象。

如果你真的想找到多个元素，那么我建议你为所需的元素使用一个通用的类名。

其次，.click()方法在所有浏览器中的div元素上都不可用。例如，它仅针对版本5中的Firefox中的所有元素实现。最好将代码分解为对单击操作的函数，然后直接调用函数（而不是尝试模拟单击）传递它期望的对象。

Answer 3

您可以使用element.dispatchEvent方法...但我不认为它在所有浏览器中都受支持。

检查此链接， element.dispatchEvent

在jquery中虽然你有trigger方法基本上调用了所有的lister，但是并没有真正执行点击操作。

$('#divResults').trigger('click')

Answer 4

好吧有几个问题，首先，你的页面中只有一个id为divResults的元素，id是唯一的。

要查找具有特定ID的元素，您可以执行以下操作：

var el = document.getElementById('divResults');

如果您想要更多元素，请尝试使用类，并在循环中按className进行检查，例如：

while (i--) {
if (els[i].className == 'yourClassName' ) {
     //code
   }
}

其次，调用els[i].click();意味着您已使用click的名称在该元素上设置了一个属性，并为其分配了一个函数。如果你已经这样做了，那么代码是正确的，如果没有检查你如何绑定事件，例如，如果你正在做

document.getElementById('divResults').onclick = function(){};  //bind click event

然后你应该做

els[i].onclick();

您还可以使用jQuery以非常简单的方式执行此操作，即信息here

Answer 5

试试这个：

<html>
    <head>
        <script type="text/javascript">
            function clickItem(divObj) { 
                if (divObj.click) { 
                    divObj.click() 
                } else if(document.createEvent) { 
                    var evt = document.createEvent("MouseEvents");  
                    evt.initMouseEvent("click", true, true, window,  
                      0, 0, 0, 0, 0, false, false, false, false, 0, null);  
                    var allowDefault = divObj.dispatchEvent(evt);
                }
            }

            function clickAllDivs() {
                var els = document.getElementsByTagName('div');
                var i = els.length;
                while (i--)
                    // you'll need to keep id unique
                    if (els[i].id.indexOf('divResults') == 0) {
                        //alert("I am in"); //Check if div is eating this function
                        clickItem(els[i]);
                    }
            }
        </script>
    </head>
    <body>
        <a href="javascript:clickAllDivs();">Expand All</a>  |  <a href="javascript:clickAllDivs()" >Collapse All</a>
        <div id="divResults1" onclick="alert('this was clicked through code');">Div to click</div>
        <div id="divResults2" onclick="alert('this was also clicked through code');">Div to click</div>
    </body>
</html>

Javascript +点击所有div

5 个答案: