无法使用数据属性jquery动态更改h3文本

时间:2015-03-13 10:52:54

标签: jquery css css3

需要动态查询数据属性更改h3文本使用

$('.partOfMachine').hover(function(){
		$(this).addClass('thisPart');
		var nPart = $(this).data('namePart');
		$('#textPart').text(nPart);
	}, function(){
		$(this).removeClass('thisPart');
		$('#textPart').text('Модель состовляющих завода');
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="machinery">
    <h3 class="text-center" id="textPart">Модель состовляющих завода</h3>
    <a href="recycling.php"><div class="partOfMachine" id="recyclingPart" data-namePart="Переработка"></div></a>
    <a href="cutting.php"><div class="partOfMachine" id="cuttingPart" data-namePart="Резка"></div></a>
    <a href="aging.php"><div class="partOfMachine" id="firstAgingPart" data-namePart="Выдержка сырья"></div></a>
    <a href="moulding.php"><div class="partOfMachine" id="blockMouldingPart" data-namePart="Блок-формовочное оборудование"></div></a>
    <a href="expanding.php"><div class="partOfMachine" id="expandingPart" data-namePart="Предвспениватели"></div></a>
    <a href="aging.php"><div class="partOfMachine" id="secondAgingPart" data-namePart="Выдержка сырья"></div></a>
    <a href="moulding.php"><div class="partOfMachine" id="shapeMouldingPart" data-namePart="Фигурно-формовочное оборудование"></div></a>
</div>

需要使用

动态查询数据属性更改h3文本

2 个答案:

答案 0 :(得分:0)

使用var nPart = $(this).attr('data-namePart');或将属性名称设为小写data-namepart,然后$(this).data('namepart')将有效

答案 1 :(得分:0)

您还可以使用jquerys .attr()函数获取html属性值,如下所示:

var nPart = $(this).attr('data-namePart')