Question

我正在尝试引用在JavaScript中使用'for'循环生成的每个单独的引导程序面板，但它不能按预期工作。我试图在它徘徊时改变它的边框颜色。这是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*****/

前几个面板似乎没有响应悬停，但其他人做。请问我做错了什么，或者我如何引用动态生成的引导板？谢谢。

以下是我在谈论的http://codepen.io/ofuochi/full/yOaXgx/ 代码基本上是根据搜索的术语从维基百科的API中获取标题。前三个面板不响应'悬停'，但其余部分。我不知道到底做错了什么。

Answer 1

#searchRow元素设置为position:absolute，位于您的面板之上。您可以更好地定位#searchRow或将.panel设置为position:relative和z-index高于#searchRow。

虽然JavaScript也可以改进，但这里没有错。

如果这是您想要悬停的全部，我建议您使用css。

Answer 2

使用css

#searchRow{
   display: table;
    position: absolute;
/*     height: 100%; *///remove
    width: 100%;
} 

    .panel:hover {
       border: 2px solid rgb(255,145,0);
       cursor: pointer;
    }

http://codepen.io/anon/pen/yJpYqJ

Answer 3

试试这种方式，

$("#article > .panel").on("mouseover", function () {
//stuff to do on mouseover
});

Answer 4

你应该在循环之后附加hover 的事件处理程序，而不是每次都在循环中。

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>'); } $(".panel").hover(function () { $(this).css({ "border": "2px solid rgb(255,145,0)", "cursor": "pointer" }); }, function () { $(this).css("border", "1px solid #ccc"); });

如何使用jQuery单独引用动态生成的引导面板

4 个答案: