向dom元素添加額外的標識符
[英]adding extra identifiers to dom elements
問題描述
我有一堆像這樣的列表格式的菜單項
<ul class="menu unselectable">
<li class="group">
Group Title
<ul>
<li class="groupItem i0">item 0</li>
<li class="groupItem i1 over">item 1</li>
</ul>
</li>
<li class="group">
Another Group Title
<ul>
<li class="groupItem i2">item 2</li>
<li class="groupItem i1">item 1 (if I hover here, the others should too</li>
</ul>
</li>
</ul>
這個想法是，如果我將鼠標懸停在具有i1類的一項上，那么所有i1項的行為都應相同。 因此，我認為增加一類over所有i1項目時我將鼠標懸停在任何一個像這樣。
$(".groupItem").hover(
function () {
$(this).addClass("over");
},
function () {
$(this).removeClass("over");
}
);
問題是我想不出一種方法來識別除$(this)之外剛剛懸停了哪些項目。 為了解決這個問題，我想到了將i1作為項目的id添加，但是不同的dom節點不應具有相同的id 。 我的下一個想法是將屬性value添加到li項中，但無濟於事（當我使用$(this).val()進行快速測試時，無論實際存儲在節點中的value如何，該value始終返回0。
有什么辦法可以添加標識符，以便我可以說$(this).<someIdentifier> ，並使用該標識符作為所有dom節點的目標？
5 個解決方案
解決方案1
3 已采納 2011-12-22 21:32:28
您可以添加一個屬性groupID="{id}" ，然后調用$(this).attr('groupID')
解決方案2
2 2011-12-22 21:35:11
Element.prototype.secondId = '';
然后
document.getElementById('id5').secondId = 13;
這樣，您只需在任何元素上設置一個新屬性即可隨意使用，但僅在javascript中而不在html中。
解決方案3
1 2011-12-22 21:40:11
我不建議向元素中添加錯誤的屬性，即使用戶的瀏覽器未很好地支持數據屬性，這也將起作用：
$(".groupItem").hover(
function () {
var className = this.className.split(' ')[1];
$('.' + className).addClass("over");
},
function () {
var className = this.className.split(' ')[1];
$('.' + className).removeClass("over");
}
);
注意：要求始終按照上面指定的方式組織類。 一種更安全的方法是：
var className = $.trim(this.className.replace('groupItem',''));
解決方案4
0 2011-12-22 21:35:09
$(this).filter('#selector')
解決方案5
0 2011-12-22 21:42:12
請嘗試以下代碼一次：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.menu{ display:inline;}
.menu li{ display:inline; float: left;width: 100px;}
.menu li ul{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".group").hover(
function () {
$(this).find("ul").show();
},
function () {
$(this).find("ul").hide();
}
);
});
</script>
</head>
<body>
<ul class="menu">
<li class="group">
Group Title
<ul>
<li>GT 1</li>
<li>GT 2</li>
</ul>
</li>
<li class="group">
Trochlear Nerve
<ul>
<li>TN 1</li>
<li>TN 2</li>
</ul>
</li>
</ul>
</body>
</html>
向DOM元素添加變量
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.