我有一些代码可以动态地将一个 JSON 元素添加到每一列。当到达第四列时,出现一个循环,并再次将一个元素放入第一列中:
first | second | third | fourth |
fifth | sixth |seventh|
当创建一个元素时,一个类会动态添加到每个元素。
我想添加一个事件监听器,单击一个元素会打开一个模式窗口,该窗口还加载一些 JSON 数据——即列中显示的数据会显示在模式中,具体取决于单击的元素。
我遇到的问题是,当我的 .click()
放置在循环内(以访问类选择器)时,JSON 数据会重复呈现(这并不奇怪)。将 .click()
放置在循环之外会导致“Category”的 JSON 值未定义
。
我怎样才能:
A. 将 .click
保留在循环内,同时防止循环影响它且仅影响它。
-- 或 --
B. 将 .click
置于循环之外,同时识别 JSON 值。
JS 片段:
var testjson = {
"d": {
"results": [{
"Title": "Aardvark",
"Category": "Animals",
"Description": "My Test description",
"TopTrainingCourse": false,
"ID": 1,
"Modified": "2019-03-05T20:13:46Z",
"Created": "2019-03-05T20:13:36Z"
}, {
"Title": "Red Panda",
"Category": "Animals",
"Description": "Donec id dictum sem",
"TopTrainingCourse": true,
"ID": 10,
"Modified": "2019-03-06T21:08:25Z",
"Created": "2019-03-06T21:08:25Z"
}, {
"Title": "Tennis",
"Category": "Sports",
"Description": "Mauris sagittis ligula",
"TopTrainingCourse": true,
"ID": 11,
"Modified": "2019-03-06T21:08:35Z",
"Created": "2019-03-06T21:08:35Z"
}]
}
}
export default class {
constructor() {
}
loadTopCourses() {
let arrTop = testjson.d.results
.filter(x => x.TopTrainingCourse === true)
.filter((el, idx, self) => { // no duplicates
return (idx === self.map(el => el.Category).indexOf(el.Category))
})
.map(x => {
return {
"Category": x.Category,
"Title": x.Title
}
});
var curIndex = 0;
$.each(arrTop, function(idx, val) {
curIndex += 1;
$("div.top-training-div > div[col='" + curIndex + "']")
.append("<div data-toggle=\"modal\" data-target=\"#modal-id\" class=\"categoryName\">" + "<span class='triangle-right'>▸</span>" + val.Category + "</div>")
// .click(function() { // -------- this renders modal data but the data's affected by the loop
// $(".modal-title").append(val.Category)
// })
if(curIndex == 4) {
curIndex = 0;
}
})
$(".categoryName").click(function(e) { // -------- does not recognize `Category`
$(".modal-title").append(e.Category)
console.log(e.Category)
})
} // ------------------ loadTopCourses
}
模态:
<div class="modal fade" id="modal-id" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">CLOSE</span> <!-- × -->
</button>
</div>
<div class="modal-body">
<div class="category-desc"></div>
<ul class="training-titles"></ul>
</div>
</div>
</div>
</div> <!-- modal fade -->
<小时/>
更新:
单击类别会打开模式并在模式中显示该类别,但单击第二个类别会将第二个类别附加到第一个类别 - 这里是 screenshot这比我能言善辩多了。
var curIndex = 0;
$.each(arrTop, function(idx, val) {
let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");
let modalTrigger = $('<div />', {
'data-toggle': 'modal',
'data-target': '#modal-id',
'data-category': val.Category,
'class': 'categoryName',
'text': val.Category
});
// let triangleRight = $('<span />', {
// 'class': 'triangle-right',
// 'text': '▸'
// });
// modalTrigger.append(triangleRight);
targetDiv.append(modalTrigger);
curIndex++;
if(curIndex == 4) {
curIndex = 0;
}
})
$(document).on('click', '.categoryName', function () {
$('.modal-title').append($(this).data('category'));
console.log($(this).data('category'));
});
} // ------------------ loadTopCourses
}
最佳答案
如果您要动态地将元素添加到 dom,请从循环中删除 .click 并尝试将您的点击事件处理程序更改为此。我还清理了您附加 .categoryName 元素的方式。
var curIndex = 0;
$.each(arrTop, function (idx, val) {
var targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");
var modalTrigger = $('<div />', {
'data-toggle': 'modal',
'data-target': '#modal-id',
'data-category': val.Category,
'class': 'categoryName'
});
var triangleRight = $('<span />', {
'class': 'triangle-right',
'text': '▸'
});
modalTrigger.append(triangleRight);
targetDiv.append(modalTrigger);
curIndex++;
if (curIndex == 4) {
curIndex = 0;
}
});
$(document).on('click', '.categoryName', function () {
$('.modal-title').text($(this).data('category'));
console.log($(this).data('category'));
});
关于javascript - 将 evt 监听器附加到动态创建的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55130929/