Question

我有一个具有数据属性的jquery-ui按钮test-button。该按钮调用具有回调函数customWidget的自定义窗口小部件fnSaveCallback。

$(".test-button").button({
    icons: {
        primary: 'icon-test icon-mixed icon-custom'
    },
    text: false 
}).customWidget({
    id: "custom-widget",
    title: "My custom widget",
    fnSaveCallback: function() {
        // Need to get the data-test attribute from the "test-button" 
    }
});

我在尝试访问test-button时遇到问题，以便从回调函数中获取data-attribute的值。知道我该怎么办？提前谢谢！

Answer 1

我找到了一种简单的方法来处理这个在click事件上添加一个类。

  $(".test-button").button({
        icons: {
            primary: 'icon-test icon-mixed icon-custom'
        },
        text: false 
  }).click(function() {
        // remove opener class from other test-buttons
        $(.test-button.opener).removeClass("opener");
        // add opener class to the clicked button
        $(this).addClass("opener");
  }.customWidget({
        id: "custom-widget",
        title: "My custom widget",
        fnSaveCallback: function() {
            // Get the data-test attribute from the "test-button"
            $(".test-button.opener").data("test");
        }
  });

Answer 2

你需要在某个地方引用元素。

const test_button = document.getElementById('test-button');

然后在fvSaveCallback中：

fnSaveCallback: function() {
    // Need to get the data-test attribute from the "test-button" 
    console.log(test_button.dataset.test);
}

编辑：编辑后，据我所知，您正在尝试将该方法应用于所有.test-button按钮。您应该只需要获取节点列表，并迭代它：）

const test_buttons = document.getElementsByClassName('test-button')
;

for (let i = 0; i < test_buttons.length; i++)
{ const button = test_buttons[i]; //This is the button
  // Do with 'button' whatever you want here.
  console.log(button.dataset.some_data);
}

如何在回调函数中访问调用元素

2 个答案: