Question

我想将后两个循环集成到前两个循环中，以便在第一个循环触发时从最后一个循环触发事件。

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
          if (Flag==true)
        {
            Response.End()
        }
    }

也许我是一名js初学者，https://docs.microsoft.com/en-us/dotnet/framework/wcf/feature-details/wcf-services-and-aspnet可以为您提供的帮助更多...

Answer 1

通过for循环，您获得了.grid-item的索引-只需在.collapsing nodeList中选择相同索引的项，然后就可以设置样式：

const gridItems = document.querySelectorAll(".grid-item");
const collapsings = document.querySelectorAll(".collapsing");
for (let i = 0; i < gridItems.length; i++) {
  gridItems[i].addEventListener("mouseenter", () => {
    gridItems[i].style.width = "480px";
    collapsings[i].style.maxHeight = "480px";
  });
  gridItems[i].addEventListener("mouseleave", () => {
    gridItems[i].style.width = null;
    collapsings[i].style.maxHeight = null;
  });
}

（请注意，使用let i非常重要-最好避免隐式创建全局变量，并使用const或let而不是var以避免不直观的行为吊装/功能范围）

要考虑的另一种选择是代替打开和关闭类，而不是像这样手动更改样式。另外，如果这些元素都在容器中，则您可能会考虑使用事件委托，这样一来，您只会整体添加两个事件，而不是为每个元素添加两个事件。

Answer 2

像这样吗？

function expand() {

  var coll = document.querySelectorAll(".grid-item");
  for (x = 0; x < coll.length; x++) {
    coll[x].addEventListener("mouseenter",
      function() {
        event.target.style.width = "480px";
        loop3(true);
      });
  }
  for (x = 0; x < coll.length; x++) {
    coll[x].addEventListener("mouseleave",
      function() {
        event.target.style.width = null;
        loop4(true);
      });
  }

  loop3(false);
  function loop3(auto_trigger) {
    var coll1 = document.querySelectorAll(".collapsing");

    for (x = 0; x < coll1.length; x++) {
      coll1[x].addEventListener("mouseenter",
        function() {
          event.target.style.maxHeight = "480px";
        });

      if (auto_trigger) coll1[x].style.maxHeight = "480px";
    }
  }

  loop4(false);

  function loop4(auto_trigger) {
    var coll1 = document.querySelectorAll(".collapsing");

    for (x = 0; x < coll1.length; x++) {
      coll1[x].addEventListener("mouseleave",
        function() {
          event.target.style.maxHeight = null;
        });

      if (auto_trigger) coll1[x].style.maxHeight = null;
    }
  }
}

通过执行另一个事件来触发事件

2 个答案: