javascript - 鼠标悬停时获取对象的标签、id、类

Question

例如，然后我将鼠标移到该对象上，我会获取其标签、id、类，并且可以在函数中使用标签、id 或类进行操作。

$(document).ready(function(){
	var O1 = {m : 0,n : 0};
	var O2 = {m : 0,n : 0};
		O1.n = Math.floor(Math.random() * (4)) + 2;
		O1.m = Math.floor(Math.random() * (O1.n - 1)) + 1;
		O2.n = Math.floor(Math.random() * (4)) + 2;
		O2.m = Math.floor(Math.random() * (O1.n - 1)) + 1;
		O2.n = O1.n;
	var n = 0;
	
		generateTableAns(1,'.A1')
		generateTableAns(2,'.A2')
		generateTableAns(3,'.A3')
		generateTableAns(4,'.A4')
		generateTableAns(5,'.A5')

		//TableAns()

}); // Sfirsit Document ready


//Generarea raspunsului partea 1
function generateTableAns(total_rows, selector){
	total_rows = total_rows || 1;
	selector = selector || "body";
	var $table = $('<table>')
	for (var i = 0; i < total_rows; i++) {
		var $tr = $('<tr>');
		var $td = $('<td>');
		$('table tr td').css('width : 200px;');
		$tr.append($td);
		$table.append($tr);
		$td.css('background-color', 'green');
		$td.addClass('e'+(i+1))
	}
	$(selector).empty()
	$(selector).append($table);
}

	function TableAns(){
	$(".A1").on({
	click : function(){
			generateTableAns(1,'.A2')
			generateTableAns(1,'.A3')
			generateTableAns(1,'.A4')
			generateTableAns(1,'.A5')
	$('.A1').removeClass('A1').addClass('B1');
	$('.A2').removeClass('A2').addClass('B2');
	$('.A3').removeClass('A3').addClass('B3');
	$('.A4').removeClass('A4').addClass('B4');	
	$('.A5').removeClass('A5').addClass('B5');
	$('.B1').css("border","black solid 3px");
			// $(this).off('click');
			// $(".A2").off('click');
			// $(".A3").off('click');
			// $(".A4").off('click');
			// $(".A5").off('click');
	n = 1;
	TableAnsF(n);
			},
	mouseover : function(){
		$('.A1').css("border","red solid 3px");
	},
	mouseleave : function(){
		$('.A1').css("border","black solid 3px");
	}
	});
	
	
	$(".A2").on({
	click :	function(){
			generateTableAns(2,'.A1')
			generateTableAns(2,'.A3')
			generateTableAns(2,'.A4')
			generateTableAns(2,'.A5')
	$('.A2').removeClass('A2').addClass('B2');
	$('.A1').removeClass('A1').addClass('B1');
	$('.A3').removeClass('A3').addClass('B3');
	$('.A4').removeClass('A4').addClass('B4');
	$('.A5').removeClass('A5').addClass('B5');
	$('.B2').css("border","black solid 3px");	
			// $(this).off('click');
			// $(".A1").off('click');
			// $(".A3").off('click');
			// $(".A4").off('click');
			// $(".A5").off('click');
	n = 2;	
	TableAnsF(n);
		},
	mouseover : function(){
		$('.A2').css("border","red solid 3px");
	},
	mouseleave : function(){
		$('.A2').css("border","black solid 3px");
	}
	});

	$(".A3").on({
	click : function(){
			generateTableAns(3,'.A2')
			generateTableAns(3,'.A1')
			generateTableAns(3,'.A4')
			generateTableAns(3,'.A5')
	$('.A3').removeClass('A3').addClass('B3');
	$('.A1').removeClass('A1').addClass('B1');
	$('.A2').removeClass('A2').addClass('B2');
	$('.A4').removeClass('A4').addClass('B4');
	$('.A5').removeClass('A5').addClass('B5');
	$('.B3').css("border","black solid 3px");	
			// $(this).off('click');
			// $(".A2").off('click');
			// $(".A1").off('click');
			// $(".A4").off('click');
			// $(".A5").off('click');
	n = 3;
	TableAnsF(n);
		},
	mouseover : function(){
		$('.A3').css("border","red solid 3px");
	},
	mouseleave : function(){
		$('.A3').css("border","black solid 3px");
	}
	});
	
	$(".A4").on({
	click :	function(){
			generateTableAns(4,'.A2')
			generateTableAns(4,'.A3')
			generateTableAns(4,'.A1')
			generateTableAns(4,'.A5')
	$('.A4').removeClass('A4').addClass('B4');	
	$('.A1').removeClass('A1').addClass('B1');
	$('.A2').removeClass('A2').addClass('B2');
	$('.A3').removeClass('A3').addClass('B3');
	$('.A5').removeClass('A5').addClass('B5');
	$('.B4').css("border","black solid 3px");
			// $(this).off('click');
			// $(".A2").off('click');
			// $(".A3").off('click');
			// $(".A1").off('click');
			// $(".A5").off('click');
	n = 4;
	TableAnsF(n);
		},
	mouseover : function(){
		$('.A4').css("border","red solid 3px");
	},
	mouseleave : function(){
		$('.A4').css("border","black solid 3px");
	}
	});
	
	$(".A5").on({
	click :	function(){
			generateTableAns(5,'.A2')
			generateTableAns(5,'.A3')
			generateTableAns(5,'.A4')
			generateTableAns(5,'.A1')
	$('.A5').removeClass('A5').addClass('B5');
	$('.A1').removeClass('A1').addClass('B1');
	$('.A2').removeClass('A2').addClass('B2');
	$('.A3').removeClass('A3').addClass('B3');
	$('.A4').removeClass('A4').addClass('B4');	
	$('.B5').css("border","black solid 3px");
			// $(this).off('click');
			// $(".A2").off('click');
			// $(".A3").off('click');
			// $(".A4").off('click');
			// $(".A1").off('click');
	n = 5;
	TableAnsF(n);
		},
	mouseover : function(){
		$('.A5').css("border","red solid 3px");
	},
	mouseleave : function(){
		$('.A5').css("border","black solid 3px");
	}
	});
	
	}

// Raspuns 
	function TableAnsF(nr){
		var selector;
		for(var i = 1 ; i <= 5; i++){
			for(var j = 1 ; j <= nr; j++){
				selector = '.B'+i+' .e'+j;
			}
		}
	}


setInterval(function(){
    
    var element = $(':hover');
    if(element.length)
    {
        var domElement = element[element.length - 1];
        var tagName = domElement.tagName;
        var id = domElement.id ? ' id="' + domElement.id + '"' : "";
        
        document.getElementById('test').innerHTML =
        "hover: &lt;" + tagName.toLowerCase() + id + "&gt;";
    }
}, 100);

.listQue {
	list-style-type: none;
}
.listAns {
	list-style-type: none;
}
 li {
	display: inline;
}

.O1, .O2 {
	display: inline-block;
}

.A1, .A2, .A3, .A4, .A5 {
	display: inline-block;
	border: 3px solid black;
}

.B1, .B2, .B3, .B4, .B5 {
	display: inline-block;
	border: 3px solid black;
}


td {
border:3px solid black;
width : 200px;
background : green;
}

table  {
    border-color:black;
	border-collapse:collapse;
	border-spacing: 0px;
	height : 200px;
}


#start {
	vertical-align: bottom;
}

body {
	background-color : #90C3D4
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">	
</head>
<body>
<div class="raspuns">
<ul class="listAns">
<li><div class="A1">1</div></li>
<li><div class="A2">2</div></li>
<li><div class="A3">3</div></li>
<li><div class="A4">4</div></li>
<li><div class="A5">5</div></li>
</ul>
</div>
<div id="test"></div>
</body>
</html>

使用`setInterval(function(){

var element = $(':hover');
if(element.length)
{
    var domElement = element[element.length - 1];
    var tagName = domElement.tagName;
    var id = domElement.id ? ' id="' + domElement.id + '"' : "";

    document.getElementById('test').innerHTML =
    "hover: <" + tagName.toLowerCase() + id + ">";
}

}, 100);` 使用 setInterval 函数它只显示 id ，但我想获取类。

Answer 1

要获取类，只需使用“domElement.className”。您可能需要考虑使用事件监听器而不是计时器。 http://www.w3schools.com/jsref/event_onmouseover.asp