Question

我一直在尝试创建一个系统，当我将鼠标悬停在特定div上时，会显示与该div相关的特定文本。每个div都在同一个类中，信息位于不同的div和相应的索引。我想知道是否有任何方法可以通过将鼠标悬停在每个div的类索引上来显示隐藏的信息。（通过显示隐藏的信息div）。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var allPeople = [];

function win (name, info){
	this.name = name;
	this.info = info;
}

allPeople[0] = new win ("Shelly", "Is Cool");
allPeople[1] = new win ("Brandon", "Likes to golf");
allPeople[2] = new win ("Steve", "Plays Football");
allPeople[3] = new win ("Mia", "Is a good cook");

var i = 0;
$('document').ready(function(){
	for (i = 0; i < allPeople.length; i++){
		$("body").append("<div class='people'> " + allPeople[i].name +" </div>");
		
	}
	for (i = 0; i < allPeople.length; i++){
		$("body").append("<div class='info'> " + allPeople[i].info +" </div>");
	}
});

</script>
<style>
body {
	background-color: lightblue;
}
div {
	background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");
	color: white;
	padding: 2%;
	margin: 2%;
	border: 3px white solid;
}
.info {
	display: none;
	border-color: red;
}
</style>
</head>
<body>




</body>
</html>

Answer 1

一个简单的解决方案可以基于在创建时将每个div的索引保存为数据属性，如：

$("body").append("<div class='people' data-index='" + i +"'> " + allPeople[i].name +" </div>");

＆＃13;

var allPeople = [];

function win (name, info){
    this.name = name;
    this.info = info;
}

allPeople[0] = new win ("Shelly", "Is Cool");
allPeople[1] = new win ("Brandon", "Likes to golf");
allPeople[2] = new win ("Steve", "Plays Football");
allPeople[3] = new win ("Mia", "Is a good cook");

var i = 0;
$('document').ready(function(){
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='people' data-index='" + i +"'> " + allPeople[i].name +" </div>");

    }
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='info' data-index='" + i +"'> " + allPeople[i].info +" </div>");
    }
    $('.people').hover(function(e) {
        $('.info').eq($(this).data('index')).show();
    }, function(e) {
        $('.info:visible').hide();
    });
});

＆＃13;

body {
    background-color: lightblue;
}
div {
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");
    color: white;
    padding: 2%;
    margin: 2%;
    border: 3px white solid;
}
.info {
    display: none;
    border-color: red;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

＆＃13;

您可以使用jQuery.index()：

＆＃13;

var allPeople = [];

function win (name, info){
    this.name = name;
    this.info = info;
}

allPeople[0] = new win ("Shelly", "Is Cool");
allPeople[1] = new win ("Brandon", "Likes to golf");
allPeople[2] = new win ("Steve", "Plays Football");
allPeople[3] = new win ("Mia", "Is a good cook");

var i = 0;
$('document').ready(function(){
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='people'> " + allPeople[i].name +" </div>");

    }
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='info'> " + allPeople[i].info +" </div>");
    }
    $('.people').hover(function(e) {
        $('.info').eq($(this).index() % 4).show();
    }, function(e) {
        $('.info').eq($(this).index() % 4).hide();
    });
});

＆＃13;

body {
    background-color: lightblue;
}
div {
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");
    color: white;
    padding: 2%;
    margin: 2%;
    border: 3px white solid;
}
.info {
    display: none;
    border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

另一种方法可以基于过滤数组元素（Array.prototype.filter()）以获得相应div的索引。

＆＃13;

var allPeople = [];

function win (name, info){
    this.name = name;
    this.info = info;
}

allPeople[0] = new win ("Shelly", "Is Cool");
allPeople[1] = new win ("Brandon", "Likes to golf");
allPeople[2] = new win ("Steve", "Plays Football");
allPeople[3] = new win ("Mia", "Is a good cook");

var i = 0;
$('document').ready(function(){
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='people'> " + allPeople[i].name +" </div>");

    }
    for (i = 0; i < allPeople.length; i++){
        $("body").append("<div class='info'> " + allPeople[i].info +" </div>");
    }
    $('.people').hover(function(e) {
        var txt = this.textContent.trim();
        var peopleInfoIDX = 0;
        allPeople.forEach(function(ele, idx) {
            if (ele.name == txt)
                peopleInfoIDX = idx;
        });
        $('.info').eq(peopleInfoIDX).show();
    }, function(e) {
        $('.info:visible').hide();
    });
});

＆＃13;

body {
    background-color: lightblue;
}
div {
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png");
    color: white;
    padding: 2%;
    margin: 2%;
    border: 3px white solid;
}
.info {
    display: none;
    border-color: red;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

＆＃13;

Answer 2

您可以使用相应的人员div来嵌套信息，而不是拥有一组线性的div，其中一些是人，另一些是信息，这样您就可以使用CSS定位正确的信息。

HTML：

<div class="people-container">
  <div class="people">Shelly</div>
  <div class="info">Is Cool</div>
</div>

CSS：

.people-container:hover .info {
  display: block;
}

因此，当有人将鼠标悬停在该人的姓名上时，可以显示该信息。

Answer 3

最简单，最简单的解决方案是使用data-index属性将索引输出到div上。

$("body").append("<div class='people' data-index="+ i +"> " + allPeople[i].name +" </div>");

然后使用

检索数据属性值

console.log($(e.target).data('index'))

如何通过悬停Div

3 个答案: