时间戳

首页 > 解决方案 > jQuery - 通过`for`循环悬停时显示文本

javascript - jQuery - 通过`for`循环悬停时显示文本

问题描述

我正在制作网页并添加功能；当您将鼠标悬停在某个div其他 div 上时，将显示某个文本。我希望有 5 个元素能够悬停并显示文本。

我添加了这个功能，但它不能正常工作 - 只有最后一个悬停div显示文本。我隔离了使用的元素并将它们移动到沙箱中进行调整。无论我做什么（我通过使用一堆if语句让它工作，但我试图删除它以便看起来更整洁），只有最后一个div会显示文本。

这是带有许多if语句的工作版本的小提琴： https ://codepen.io/SynergyOfLife/pen/qBNJboR

setInterval(function(){
    var dataArray = ["1","2","3","4","5"]
    var isHovered1 = $(`.${dataArray[0]}`).is(":hover");
    var isHovered2 = $(`.${dataArray[1]}`).is(":hover");
    var isHovered3 = $(`.${dataArray[2]}`).is(":hover");
    var isHovered4 = $(`.${dataArray[3]}`).is(":hover");
    var isHovered5 = $(`.${dataArray[4]}`).is(":hover");


    if (isHovered1) {
        $('p').html("TEST")     
    } else if (isHovered2) {
        $('p').html("TEST")
    }else if (isHovered3) {
        $('p').html("TEST")
    } else if (isHovered4) {
        $('p').html("TEST")
    }else if (isHovered5) {
        $('p').html("TEST")
    } else {
        $('p').html("")
    }
    

}, 300);
div {
    height:100px;
    width: 100px;
    background: blue;
    float: left;
}

.viewer {
    height: 500px;
    width: 500px;
    background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
        <a>Test</a>
    </div>
    <div class="2">
        <a>Test</a>
    </div>
    <div class="3">
        <a>Test</a>
    </div>
    <div class="4">
        <a>Test</a>
    </div>
    <div class="5">
        <a>Test</a>
    </div>
    <div class="viewer">
        <p></p>
    </div>

这是我想要完善的版本： https ://codepen.io/SynergyOfLife/pen/VwjELME

setInterval(function(){
    var dataArray = ["1","2","3","4","5"]

    var i;
    for (i = 0; i < dataArray.length; i++) {
        var isHovered = $(`.${dataArray[i]}`).is(":hover");
        if (isHovered) {
            $('p').html("TEST")
        } else {
            $('p').html("")
        }

    }


    

}, 300);
div {
    height:100px;
    width: 100px;
    background: blue;
    float: left;
}

.viewer {
    height: 500px;
    width: 500px;
    background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
        <a>Test</a>
    </div>
    <div class="2">
        <a>Test</a>
    </div>
    <div class="3">
        <a>Test</a>
    </div>
    <div class="4">
        <a>Test</a>
    </div>
    <div class="5">
        <a>Only working div?</a>
    </div>
    <div class="viewer">
        <p></p>
    </div>

总之，我正在寻求有关如何缩短if语句数量的帮助

标签： javascripthtmljquerycss

解决方案

只需使用hover()方法，它接受两个函数，一个用于 mouseenter，一个用于 mouseleave。

var dataArray = ["1", "2", "3", "4", "5"]
var selectors = '.' + dataArray.join(',.');

$(selectors).hover(function() {
  // `this` is the element the event occurred on
  $('p').html('TEST ' + this.className)
}, function() {
  $('p').empty()
})
div {
  height: 100px;
  width: 100px;
  background: blue;
  float: left;
}

.viewer {
  height: 500px;
  width: 500px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <a>Test</a>
</div>
<div class="2">
  <a>Test</a>
</div>
<div class="3">
  <a>Test</a>
</div>
<div class="4">
  <a>Test</a>
</div>
<div class="5">
  <a>Test</a>
</div>
<div class="viewer">
  <p></p>
</div>

推荐阅读