我试图引用在 JavaScript 中使用“for”循环生成的每个单独的 Bootstrap 面板，但它没有按预期工作。 当它悬停时，我试图改变它的边框颜色。这是 JavaScript 代码片段:
/*****For loop starts here******/
for (var i = 0; i < data.query.search.length; i++) {
var title = data.query.search[i].title;
var summary = data.query.search[i].page;
$('#article').append('<div class="panel panel-default"><div class="panel-body"><h4>' + title + '<h4><br><small>' + summary + '</small></div></div>');
/*********Here is the hover function********/
$(".panel").hover(function() {
$(this).css({
"border": "2px solid rgb(255,145,0)",
"cursor": "pointer"
});
}, function() {
$(this).css("border", "1px solid #ccc");
});
/********Ends here*************************/
}
/****For loop ends here*****/
前几个面板似乎没有响应悬停，但其他面板有。 请问我做错了什么或者我如何引用动态生成的 Bootstrap 面板？谢谢。
这就是我要说的 http://codepen.io/ofuochi/full/yOaXgx/ 这段代码主要做的是根据搜索到的术语从维基百科的 API 中获取标题。前三个面板不会响应“悬停”，但其余面板会。我不知道到底做错了什么。
最佳答案
#searchRow 元素设置为 position:absolute 并且位于面板上方。
您可以更好地定位 #searchRow 或将 .panel 设置为 position:relative 和 z-index 高于 #searchRow。
JavaScript 在这里并没有错，尽管它也可以改进。
如果这就是您想要的悬停效果，我建议您使用 css 来实现。
关于javascript - 如何使用 jQuery 单独引用动态生成的 Bootstrap 面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38372754/