Как добавить элемент массива в тд, используя hover append? - PullRequest
Новая
       27

Как добавить элемент массива в тд, используя hover append?

0 голосов
/ 24 октября 2018

Когда я наводю курсор на каждый тд, функция наведения работает, но только добавляет последний элемент в массиве ко всем тд, как я могу заставить его отображать правильный автомобиль? 

<!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>

Ответы [ 3 ]

0 голосов
/ 24 октября 2018

Описание проблемы:

Когда вы регистрируете слушателей для события hover на каждом td , функция сохраняет ссылку на автомобиль переменная.После завершения цикла эта переменная будет содержать последнее значение массива, поэтому при запуске триггеров события hover они будут использовать это последнее значение.

Одно решение:

Одним из решений является сохранение idx массива в элементах td как дополнительного атрибута, тогда вы можете сделать, как в следующем примере: 

var cars = ["Saab", "Volvo", "BMW"];

$(document).ready(function()
{
    for (i = 0; i < cars.length; i++)
    {
        $( "#id" + i ).hover(function()
        {
            var car = cars[Number($(this).attr("cars-idx"))];
            $(this).append($("<span> make is " + car + "</span>"));
        }, 
        function()
        {
            $(this).find("span:last").remove();
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<table width="250px"  border="1" cellspacing="10" cellpadding="3">
    <tr>
        <td id="id0" cars-idx="0">car 1</td>
    </tr>
    <tr>
        <td id="id1" cars-idx="1">car 2</td>
    </tr>
    <tr>
        <td id="id2" cars-idx="2">car 3</td>
    </tr>
</table>
0 голосов
/ 24 октября 2018

Существуют различные способы сделать это, основываясь на идентификаторе td, порядке массива и т. Д.

Лично я бы поступил так: 

var cars = ["Saab", "Volvo", "BMW"];

var i = 0;

// assign all of your values here, not ID based
$("table td").each(function(){
  $(this).append("<span> make is "+cars[i]+"</span>" );
  i++; 
});

// Hide all of them
$("table td span").hide();

// On hover, show the one you're hovering on, hide it again when you mouse 
 off
$("table td").on({
    mouseover: function() {
        $(this).find("span").stop().show();
    },

    mouseout: function() {
        $("table td span").stop().hide();
    }
})
0 голосов
/ 24 октября 2018

Будет работать проверка 

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