source

jQuery: 데이터 특성 가져오기

factcode 2023. 10. 11. 21:02
반응형

jQuery: 데이터 특성 가져오기

나의 html에 나는.span요소:

<span class="field" data-fullText="This is a span element">This is a</span>

그리고 나는 그것을 얻고 싶습니다.data-fullText기여하다.이 두 가지 방법을 시도해 보았지만 효과가 없었습니다(둘 다 돌아옴).undefined):

$('.field').hover(function () {
    console.log('using prop(): ' + $(this).prop('data-fullText'));
    console.log('using data(): ' + $(this).data('fullText'));
});

그런 다음 검색해보니 다음과 같은 질문이 있었습니다.data-id 속성을 얻는 방법은?그리고 jquery는 데이터 속성 값을 가져올 없습니다.
두 사람의 대답은."Use .attr('data-sth') or .data('sth')".
나는 그것을 알고 있습니다..attr()더 이상 사용하지 않지만(jquery-1.11.0에서 사용), 시도해 보았습니다.
효과가 있었어요!

누가 왜 그런지 설명해 줄 수 있나요?

다음 기능을 사용할 수 있습니다.

$(this).attr('data-fullText')

또는 속성 이름을 소문자로 줄이면 다음과 같습니다.

data-fulltext="This is a span element"

그러면 다음 기능을 사용할 수 있습니다.

$(this).data('fulltext')

.data()function은 소문자 특성 이름에서만 작동합니다.

1. 시도: .attr()

  $('.field').hover(function () {
    var value=$(this).attr('data-fullText');
  $(this).html(value);
});

데모 1: http://jsfiddle.net/hsakapandit/Jn4V3/

2. 시도해 보십시오: .data()

$('.field').hover(function () {
    var value=$(this).data('fulltext');
  $(this).html(value);
});

데모 2: http://jsfiddle.net/hsakapandit/Jn4V3/1/

ID 및 데이터 속성을 원하는 대로 변경!

  <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

다음은 https://jsfiddle.net/ed5axgvk/1/ 의 작동 예입니다.

이거 나한테 효과가 있어요.

$('.someclass').click(function() {
    $varName = $(this).data('fulltext');
    console.log($varName);
});

이것이 제가 생각해낸 것입니다.

		$(document).ready(function(){
		
		$(".fc-event").each(function(){
		
			console.log(this.attributes['data'].nodeValue)	
		});
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='external-events'>
			<h4>Booking</h4>
			<div class='fc-event' data='00:30:00' >30 Mins</div>
			<div class='fc-event' data='00:45:00' >45 Mins</div>
</div>

언급URL : https://stackoverflow.com/questions/23592030/jquery-get-data-attribute

반응형