html 요소에 대한 onclick 이벤트에 대한 data-* 특성 가져오기

html 요소에 대한 onclick 이벤트에 대한 data-* 특성 가져오기

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);">
       Click to do something
</a>

나는 그것을 얻고 싶습니다.data-id그리고.data-option함수 내부의 값goDoSomething(10, 21)사용하려고 했습니다.this참조:this.data['id']하지만 효과가 없었습니다.

이거 어떻게 해요?

이를 달성할 수 있습니다.$(identifier).data('id')jquery를 사용해서,

    <script type="text/javascript">

        function goDoSomething(identifier){     
            alert("data-id:"+$(identifier).data('id')+", data-option:"+$(identifier).data('option'));               
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

javascript : 사용가능getAttribute("attributename")javascript tag를 사용하고 싶다면,

    <script type="text/javascript">

        function goDoSomething(d){
            alert(d.getAttribute("data-id"));
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

또는:

    <script type="text/javascript">

        function goDoSomething(data_id, data_option){       

            alert("data-id:"+data_id+", data-option:"+data_option);
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this.getAttribute('data-id'), this.getAttribute('data-option'));">
           Click to do something
    </a>

다음과 같은 경우:

$(this).data('id');
$(this).data('option');

작동 예: http://jsfiddle.net/zwHUc/

저는 그냥 이 jQuery 트릭을 사용합니다.

$("a:focus").attr('data-id');

초점을 맞추게 됩니다.a원소를 얻음.data-id그것으로부터 속성을 부여합니다.

데이터 속성이 있는지 확인한 다음 작업을 수행합니다.

$('body').on('click', '.CLICK_BUTTON_CLASS', function (e) {
                        if(e.target.getAttribute('data-title')) {
                            var careerTitle = $(this).attr('data-title');
                            if (careerTitle.length > 0) $('.careerFormTitle').text(careerTitle);
                        }
                });

function get_attribute(){ alert( $(this).attr("data-id") ); }

https://www.developerscripts.com/how-get-value-of-data-attribute-in-jquery 에서 자세히 보기

여기 예가 있습니다.

 <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li>

    $('.facultySelecter').click(function() {        
    var unhide = $(this).data("faculty");
    });

varunhide를 ahs로 설정하므로 .data ("foo")를 사용하여 원하는 data-* 특성의 "foo" 값을 가져옵니다.

앵커 ID 또는 데이터 액션 속성을 직접 사용하여 이벤트를 트리거할 수 있습니다.

html 코드

<a id="option1" data-action="option1" data-id="10" data-option="21" href="javascript:void(0);" title="Click Here">Click Here</a>

jQuery 코드:

$('a#option1').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option')) ;   
});

오어

$('[data-action="option1"]').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option'));    
});

사용자$()갖기 위해jQueryobject from your link anddata()가치관을 얻다

<a id="option1" 
   data-id="10" 
   data-option="21" 
   href="#" 
   onclick="goDoSomething($(this).data('id'),$(this).data('option'));">
       Click to do something
</a>

언급URL : https://stackoverflow.com/questions/20030162/getting-data-attribute-for-onclick-event-for-an-html-element