javascript - 関数onClickを呼び出し、要素のdata-*属性から値を渡します

Question

私はこのようなリンクを持っています：

<li><a href="#" data-value="Codes">Get codes</a></li>
<li><a href="#" data-value="Product">Get products</a></li>

リンクをクリックすると関数が呼び出され、data-valueに含まれている値を渡すようにするにはどうすればよいですか？

function refreshGrid(value) { }

Answer 1

次のことを試してください。

$('li > a[href="#"][data-value]').click(function (e) { // On click of all anchors with a data-value attribute and a href of # that are immediate children of li elements (nb this selector can be modifed to suit your needs)
  e.preventDefault(); // prevent the default (navigate to href)
  refreshGrid($(this).data('value')); // call your refreshGrid function with the value contained in the 'data-value' attribute
});

Answer 2

var linkValue = $("li a").attr("data-value");

編集：より良い例

$("li a").click(function () {
    var myDataValue = $(this).attr("data-value");
    refreshGrid(myDataValue);
});

Answer 3

これが簡単なサンプルです

$('ul').on('click','a[data-value]',function(){
    refreshGrid(this.getAttribute('data-value'));
    return false;
});