如何從徘徊獲得類索引Div

我一直在試圖創建一個系統，當我將鼠標懸停在特定的div上時，出現與該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){ 
 
\t this.name = name; 
 
\t 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(){ 
 
\t for (i = 0; i < allPeople.length; i++){ 
 
\t \t $("body").append("<div class='people'> " + allPeople[i].name +" </div>"); 
 
\t \t 
 
\t } 
 
\t for (i = 0; i < allPeople.length; i++){ 
 
\t \t $("body").append("<div class='info'> " + allPeople[i].info +" </div>"); 
 
\t } 
 
}); 
 

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

 

 

 

 
</body> 
 
</html>

來源

2017-07-28 SirLucidus

爲什麼不給你'div'標記了'dataset'屬性？使用for循環的索引「i」來獲取'dataset'的值，然後使用查詢選擇器來定位相關的'info'類？或者一個簡單得多的方法是使用懸停的元素並使用'.next（）'來獲取'info' – NewToJS

不是有申報單，其中有些是和其他人的線性組是信息，你可以窩與其對應的人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; 
}

因此，當有人懸停在此人的姓名，該信息可以顯示。

來源

2017-07-28 17:28:32 Auroratide

你最簡單和不麻煩的解決方案是使用data-index屬性將索引輸出到div。

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

後來檢索與

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

來源

2017-07-28 17:30:25 jagzviruz

一個簡單的解決方案中的數據屬性值可以基於在創建時節省每div的索引作爲等的數據屬性：

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

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(); 
 
    }); 
 
});

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; 
 
}

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

可以使用jQuery.index()：

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(); 
 
    }); 
 
});

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; 
 
}

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

一種不同的方法可以基於爲了得到對應div的索引過濾數組元素（Array.prototype.filter()）。

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(); 
 
    }); 
 
});

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; 
 
}

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

來源

2017-07-28 17:33:37 gaetanoM

非常好！沒有想到'.index（）'我會爲將來記住這一點。 +1 – NewToJS

@NewToJS非常感謝。 – gaetanoM

如何從徘徊獲得類索引Div

回答

相關問題