主页 / 问题 / 771018
Accepted
Alexey Giryayev
Asked:2020-01-15 20:38:47 +0000 UTC2020-01-15 20:38:47 +0000 UTC

悬停时使用数组中的数据创建元素

  • 772

因此，有一段代码可以从数组中创建一个列表：

var cartArray = shoppingCart.listCart();

var output = "";
for (var i = 0; i<cartArray.length; i++) {
    output += "<li id='" + cartArray[i].id + "'>" +
    "<div class='preview' style='background-image: url(" + cartArray[i].img + ")'></div>" +
    "<a href='javascript:void(0)' class='delete-item far fa-times-circle' data-name='" + cartArray[i].name + "'></a>" +
    "</li>";
}
$("#panel").html(output);

$("#panel li").hover(
    function() {
// Можно было через атрибуты извлечь как-то так
// var name = $(this).attr("data-name");
// и затем поставить в нужное место кода, без участия массива
        for (var ..........) {
            panel.append( $( "<div class='item transition'><div class='title'>" + cartArray[i].name + "</div><a href='" + cartArray[i].link + "' class='link transition'>More images</a></div><div class='image' style='background-image: url(" + cartArray[i].img + ")'></div>" ) );
        }
    }, function() {
        panel.find(".item").remove();
    }
);

将鼠标悬停在生成的列表项上时，我需要显示一个块，其中将有来自先前创建的列表之外的同一数组的数据。我可以为列表项指定属性，然后轻松提取它们并在必要时替换它们，但有些事情告诉我这可以更容易完成。通过从数组中请求必要的数据，按 ID 或列表中的顺序进行比较。

jquery

1 个回答

  1. Best Answer

    如果我正确理解了所有内容，那么是这样的：

    $("#show-cart li").hover(
    function() {
        var id = Number($(this).attr("id"));
        for (var i in cartArray) {
            if (cartArray[i].id === id) {
                panel.append( $( "<div class='item transition'><div class='title'>" + cartArray[i].name + "</div><a href='" + cartArray[i].link + "' class='link transition'>More images</a><div class='image' style='background-image: url(" + cartArray[i].img + ")'></div></div>" ) );
            }
        }
    }, function() {
        panel.find(".item").remove();
    }
);

    我们从列表项中获取 id，将其与数组中的对象进行比较，并将所需的数据输出到块中。

    • 1

相关问题