Question

我有一个静态的字符串数组和一个div，其中包含一个p元素，一次包含一个字符串。我要做的是，当您在div上移动时，您遍历数组并根据当前鼠标位置以及数组中的位置更改文本。

我想到的方式是

获取以像素为单位的div大小，再除以数组中元素的数量。
然后，我将在每次更改鼠标位置时对其进行检查，并根据其位置（例如，在div的52部分中）将其更改为数组中的52个项。

我是否想得太多？有没有更简单的方法可以做到这一点？

Answer 1

类似以下解决方案的方法应该适合您。为每个要添加的字符串添加一个div / span / container。添加一个事件侦听器，该事件侦听器在您滑入时显示字符串的容器，并在您滑出时删除该事件侦听器。我们使用“可见性：隐藏”而不是“显示：无”来确保DOM中仍然存在您的包含块。

Index.html：

    <div class="container">
    </div>

Main.css：

    .container {
      display: flex;
      flex-direction: row;
      background: #DDD;
      width: 100%;
      height: 200px;
    }

    .child {
      width: 100%;
      height: 100%;
      color: black;
    }

    .hide {
      visibility: hidden;
    }

Index.js：

         //Replace this with however you're getting your strings now
        var stringContent = ["String #1", "String #2", "String #3"]

        $(document).ready(function(){

          //You can remove this if the number of strings are not dynamic and replace with the hardcoded html tags
          for (var i = 0; i < stringContent.length; i++)
            {
              var eleToAdd = `<div class='child hide'>${stringContent[i]}</div>`
              $(".container").append(eleToAdd)
            }

          $(".child").on("mouseenter", function(){
            $(this).removeClass("hide");
          })

          $(".child").on("mouseout", function(){
            $(this).addClass("hide");
          })
        })

鼠标左移或右移div时遍历Array

1 个答案: