动态元素数量上的Javascript鼠标

Question

我的目标是悬停，一个包含在标签中的p元素在悬停时变大。我已经通过css3转换实现了这一点，但是这不是问题所在。

循环在每次迭代时都会在下面的表单中创建一个可变数量的元素。

anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPT oneplustwo\" alt=\'"+   image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
        anchorElement += '</a>';

当用户在相关锚上滚动时，我希望能够添加鼠标进入/退出效果。每个p标签包含独特的信息，需要传达，在悬停时，只有相关的一个应该作出反应。

我不想这样做，每次在上面创建一个新元素时，每个方法都创建两个方法。是否有一种方法可以使下面的内容适用于动态数量的元素？

$("#anchor" + etc).mouseover(function() {
document.getElementById("test").style.height="1.1em";
});
$("#anchor" + etc).mouseout(function() {
document.getElementById("test").style.height="1.1em";
});

我的建议版本。控制台日志正常工作。

 .popupHighlight {
 color: red;
 }

。。

 $('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(e.target).next('p').addClass("popupHighlight");
 });

 $('.boxOPToneplustwo').mouseout(function (e) {
$(e.target).next('p').removeClass("popupHighlight");
 });

Answer 1

那么选择所有的元素呢？

$('a').mouseout(function() {
 //do stuff in here
});

或者更好的是，有一个类选择器：

$('.mySpecialRolloverClass').mouseover(function (e) {
    $(e.target).next('p').addClass("highlight");
});

$('.mySpecialRolloverClass').mouseout(function (e) {
    $(e.target).next('p').removeClass("highlight");
});

它会与

<a href="whatever" class="mySpecialRolloverClass">An anchor</a>

和

.highlight {
    color:red;
}

这里有一个小提琴演示：

http://jsfiddle.net/8J6kM/

Answer 2

@约古拉的答案是正确的，但是如果您想动态添加更多的链接，则需要使用on方法而不是mouseover和mouseout，否则它将无法工作。有关详细信息，请参阅演示和jQuery 文档。

// I assumed that links are placed inside of a container element: #links
$('#links').on('mouseover', '.mySpecialRolloverClass', function (e) {
    $(e.target).next('p').addClass("highlight");
});