时间戳

首页 > 解决方案 > 如何使用悬停追加将数组项添加到 td？

jquery - 如何使用悬停追加将数组项添加到 td？

问题描述

当我将鼠标悬停在每个 td 上时，悬停功能有效，但仅将数组中的最后一项附加到所有 td，如何使其显示正确的汽车？

<!doctype html>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table width="250px"  border="1" cellspacing="10" cellpadding="3">
    <tr>
        <td id ="id0">car 1</td>
    </tr>
    <tr>
        <td id ="id1">car 2</td>
    </tr>
    <tr>
        <td id ="id2">car 3</td>
    </tr>
</table>
<script>
var cars = ["Saab", "Volvo", "BMW"];
for (i = 0; i < cars.length; i++) {
    var car = cars[i]
    $( "#id"+i ).hover(function() { 
        $( this ).append( $( "<span> make is "+car+"</span>" ) );
    }, 
    function() {
        $( this ).find( "span:last" ).remove();
    }); 
} 
</script> 
</body>
</html>

标签： jqueryhoverappend

解决方案

它将工作检查

<table width="250px"  border="1" cellspacing="10" cellpadding="3">
    <tr>
        <td id ="id0" data-id="0" class="carHover">car 1</td>
    </tr>
    <tr>
        <td id ="id1"  data-id="1" class="carHover">car 2</td>
    </tr>
    <tr>
        <td id ="id2"  data-id="2" class="carHover">car 3</td>
    </tr>
</table>

jQuery

var cars = ["Saab", "Volvo", "BMW"];
$('.carHover').hover(function(){
var dynaicid= $(this).data('id');
$( this ).append( $( "<span> make is "+cars[dynaicid]+"</span>" ) );
});
$( ".carHover" ).mouseout(function() {
  $( this ).find( "span" ).remove();
});

推荐阅读