Question

当试图按下某个标签时，我试图将内容添加到css网格中，但是当我单击a标签时，页面加载时什么也没发生。

我已经尝试了多种方法，例如添加setInterval（）并在执行代码之前等待CSS网格加载，这是代码：

$(".il2").click(function() {
    var productGridClass = document.getElementsByClassName("productGrid");
    productGridClass.onload = function() {
            for(var i = 0; i < womenArray.length; i++) {
                    $("<img class='pBox' src='' alt='products'> </img>").appendTo(".productGrid");
            }
    $(".pBox").attr("src", "assets/grid-button-image.png");
    }
})

预期结果是，当按下a标签时，页面加载，而CSS网格的内容加载

HTML

<li><a class="link il2" href="product-page.html">MENS</a></li>

Answer 1

您不会显示HTML中的哪些元素具有类productGrid，但这并不重要，原因如下：

1）getElementsByClassName返回元素的集合。您不仅可以在此集合上设置onload =，还需要遍历它们并在每个元素上进行设置。

2）即使您执行了此操作，仅在元素上设置onload也不会执行任何操作。您可能要使用addEventListener或使用jQuery的事件处理程序。

3）即使您已解决此问题，页面中单个元素的onload事件也不会触发。整个文档加载完毕后，它只会触发一次。

我不确定为什么该代码甚至位于包装的click()事件处理程序中，我将其删除并替换为：

$(document).ready(function () {
  for(var i = 0; i < womenArray.length; i++) {
    $("<img class='pBox' src='' alt='products'> </img>").appendTo(".productGrid");
  }
  $(".pBox").attr("src", "assets/grid-button-image.png");
});

这是假设您希望代码在文档加载时运行。如果您实际上希望它在单击某些内容后运行，则应将其放入单击处理程序中（但不要将其包装在两者中）。

在按下标签后的href加载后执行功能（jQuery）

1 个答案: