Question

我有一个数组。我从Array获取数据并在jQuery Append to list中使用它。但是当我点击列表项时，它只显示最后一个元素。

var array = [[1,2,7],[3,4,8],[5,6,9]];
for (var i = 0; i < array.length; i++){
    var firstVal = array[i].[0];
    var secondVal = array[i].[1];
    var thirdVal = array[i].[2];

    var list = "<div class='divClass' <p class='class1'>"+ firstVal +"</p>"
             + "<p class='class2'>"+ secondVal +"</p></div>";
    $("#myDiv").append(list);
    $(".divClass").on('click', function(){
        alert(thirdVal);
    })
}

当我点击每个项目时，它总是显示thirdVal的最后一个值9.如何动态获取第三个值？

Answer 1

将事件处理程序移到for循环之外，并使用.data(key, value)使用.data(key)保留任意数据，稍后可以使用当前元素上下文中的var array = [ [1, 2, 7], [3, 4, 8], [5, 6, 9] ]; for (var i = 0; i < array.length; i++) { //Rectify syntax errors while reading var firstVal = array[i][0]; var secondVal = array[i][1]; var thirdVal = array[i][2]; var list = "<div class='divClass'><p class='class1'>" + firstVal + "</p>" + "<p class='class2'>" + secondVal + "</p></div>"; $(list).data('item', thirdVal).appendTo("#myDiv"); } $(".divClass").on('click', function() { console.log($(this).data('item')); })重试该数据。

此外，检索数组元素时出现语法错误

.divClass {
  border: 1px solid black
}

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

let

或者，使用var而不是var array = [ [1, 2, 7], [3, 4, 8], [5, 6, 9] ]; for (var i = 0; i < array.length; i++) { //Rectify syntax errors while reading var firstVal = array[i][0]; var secondVal = array[i][1]; let thirdVal = array[i][2]; var list = "<div class='divClass'><p class='class1'>" + firstVal + "</p>" + "<p class='class2'>" + secondVal + "</p></div>"; $(list).on('click', function() { console.log(thirdVal); }).appendTo("#myDiv"); }并将元素处理程序绑定到元素，然后将其附加到列表。好的阅读What's the difference between using "let" and "var" to declare a variable?

.divClass {
  border: 1px solid black
}

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

{
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": [],
    "showOutput": "always",
    "echoCommand": true,
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "hello",
            "args": ["Hello World"]
        },
        {
            "taskName": "bye",
            "args": ["Good Bye"]
        }
    ]
}

Answer 2

您必须在点击功能中使用$(".divClass").on('click', function(e){ var index = $(this).index(); var text = $(this).text(); alert('text: ',text, 'index: ',index); e.preventDefault(); });来引用从列表中点击的当前项目：

{{1}}

期待这对你有帮助。

TKS

Answer 3

您必须将事件移到for循环

之外

var array = [[1,2,7],[3,4,8],[5,6,9]];
for (var i = 0; i < array.length; i++){
    var firstVal = array[i].[0];
    var secondVal = array[i].[1];
    var thirdVal = array[i].[2];

    var list = "<div class='divClass' <p class='class1'>"+ firstVal +"</p>"
             + "<p class='class2'>"+ secondVal +"</p></div>";
    $("#myDiv").append(list);

}
    $(document).on('click','.divClass', function(){
        alert(thirdVal);
    })

Answer 4

你能试试吗？

var $list = "<div class='divClass' <p class='class1'>"+ firstVal +"</p>"
                 + "<p class='class2'>"+ secondVal +"</p></div>";
$("#myDiv").append($list);
$list.on('click', function(){
    alert(thirdVal);
});

Answer 5

var array = [[1,2,7],[3,4,8],[5,6,9]];
for (var i = 0; i < array.length; i++){
    var firstVal = array[i].[0];
    var secondVal = array[i].[1];
    var thirdVal = array[i].[2];

    var list = "<div class='divClass' <p class='class1'>"+ firstVal +"</p>"
             + "<p class='class2'>"+ secondVal +"</p><p style='display:none' class='thv"+i+"'>"+thirdVal+"</p></div>"; // change here
    $("#myDiv").append(list.cloneNode(true)); // Clone the node here
    $(".divClass").on('click', function(){
        alert(document.getElementsByClassName("thv"+i)[0].innerHTML); // change here
    })
}

如果在追加之前没有克隆节点，则会添加相同的节点。如果您克隆它，它将每次创建一个副本。现在检查一下。还有一个问题是你正在提醒thirdVal。它将存储最后一个值。因此，创建一个样式为display:none的对象并为其添加第三个值。然后使用alert(<theobject>.innerHTML);

jQuery单击Appended Element不起作用

5 个答案: