Question

我有这个HTML：

<div id="measureControl" data-role="controlgroup" data-type="vertical">
    <a href="#" data-role="button" data-icon="home" id="measureButton" data-iconpos="notext"></a>
</div>

点击锚点后，我需要获取data-icon属性并设置另一个数据图标（例如 eye ）。

我试试这个：

  $("#measureButton").click(function () {
        var el = $(".ui-icon", this);
        var output = document.getElementById('output');
        if (el.hasClass("home")) {
            el.removeClass("home");
            el.addClass("eye");
            output.style.display = "block";
        } else {
            measureControls.line.deactivate();
            el.removeClass("eye");
            el.addClass("home");
            output.style.display = "none";
        }
    });

但它没有用。

任何想法如何使用jQuery或JavaScript实现它？

Answer 1

只需使用jquery .data函数

 $("#measureButton").click(function () {
       var currentIcon = $(this).data('icon');
       alert(currentIcon);
       $(this).data('icon','eye');
       var currentIcon = $(this).data('icon');
       alert(currentIcon);
    });

https://jsfiddle.net/qs9zwwo0/

Answer 2

用户jquery attr函数获取属性值。

     $("#measureButton").click(function () {
      //to get the data icon.
      alert($(this).attr('data-icon'));

      // to set data icon
      $(this).attr('data-icon','eye');


});

Answer 3

使用纯JavaScript非常简单。

var iconData = measureButton.dataset.icon;

Answer 4

像Tushar所说：

$(document).on("click", "#measureButton", function(){
  $(this).attr("data-icon", "eye").button( "refresh" );
});

如何从锚标记中获取数据图标？

4 个答案: