jquery가 데이터 속성 값을 가져올 수 없습니다.

jquery가 데이터 속성 값을 가져올 수 없습니다.

---

jQuery에서 변수를 설정하려고합니다. 값은 버튼의 클릭 이벤트에 설정되어야합니다. onclick 이벤트가 발생하지만 x10Device 변수는 그대로 유지 undefined됩니다.

나는 jquery 1.7.1에 있습니다.

jQuery :

 $x10Device = $(this).data("X10");

HTML :

<button class="toggleStatus" data-X10="C5">

나는 무엇이 잘못되었는지 볼 수 없다.

---

jQuery의 data()메소드는 data-*속성에 대한 액세스를 제공 하지만 속성 이름의 대소 문자를 막습니다. 다음 중 하나를 사용할 수 있습니다.

$('#myButton').data("x10") // note the lower case

또는 attr()케이스를 보존 하는 방법을 사용할 수 있습니다 .

$('#myButton').attr("data-X10")

여기에 두 가지 방법을 시도해보십시오 http://jsfiddle.net/q5rbL/

이러한 접근 방식은 완전히 동일하지 않습니다. 이 경우 변경data-* 요소의 속성을, 당신은 사용해야합니다 attr(). data()처음에 값을 한 번 읽은 다음 캐시 된 복사본을 계속 반환하는 반면 attr()매번 속성을 다시 읽습니다.

jQuery는 속성 이름의 하이픈을 낙타 대문자 ( source -ie data-some-data == $(ele).data('someData'))로 변환합니다. 이 두 가지 변환은 모두 사용자 지정 데이터 속성에 대문자가 포함되어서는 안되며 dataset속성 ( source ) 에서 하이픈이 카멜로 표시되도록 지정하는 HTML 사양을 준수합니다 . jQuery의 data방법은이 표준 동작을 모방 / 준수 할뿐입니다.

선적 서류 비치

• data-http : //api.jquery.com/data/
• attr-http : //api.jquery.com/attr/
• HTML 의미 및 구조, 사용자 정의 데이터 속성-http: //www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

---

Iyap. 데이터 이름 data-x10에서 대소 문자 구분

var variable = $('#myButton').data("x10"); // 사용자 정의 데이터 속성의 값을 얻습니다.

---

일반 자바 스크립트 방법 사용

$x10Device = this.dataset("x10");

---

대소 문자를 모두 소문자로 변경하면 저에게 효과적이었습니다.

---

원하는대로 선택기 및 데이터 속성을 변경할 수 있습니다!

 <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/

---

버튼 클릭과 관련된 이벤트가 예를 들어<i class="fa... 버튼 내부의 아이콘 태그 ( ) 로 하위 요소에 전파되지 않는지 확인하십시오. 이렇게 전파하면 버튼을 놓치고 아이콘 태그를 칠 수 있습니다 .$(this).attr('data-X10')

<button data-x10="C5">
    <i class="fa fa-check"></i> Text
</button>

$('button.toggleStatus').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(event.currentTarget).attr('data-X10');
});

참고URL : https://stackoverflow.com/questions/17351282/jquery-cant-get-data-attribute-value