Question

我正在使用jquery data（）来附加我想在单击另一个div（.panel_button）时显示的div的名称。当文档准备就绪时，我正在将此div的id附加到按钮上。这是一个好的方法吗？或者是资源过于密集且看起来不专业？

$(document).ready(function(){

    $('#sample_button').data('panel', 'sample_kit_container');
    $('#mail_button').data('panel', 'mail_container');
    $('#mbillboard_button').data('panel', 'mbillboard_container');

    $('.panel_button').on('click', function(){

        $('.secondary_panel').hide();
        var panel = $(this).data('panel');
        $('#' + panel).show();

    });

});

Answer 1

是的，这应该可以正常工作。作为替代方案，您可以存储实际元素本身（假设它已经存在），而不是每次都找到它：

$('#sample_button').data('panel', $('#sample_kit_container'));
$('#mail_button').data('panel', $('#mail_container'));
$('#mbillboard_button').data('panel', $('#mbillboard_container'));

$('.panel_button').on('click', function(){

    $('.secondary_panel').hide();
    var panel = $(this).data('panel');
    panel.show();

});

Answer 2

另一种选择是将实际的jQuery元素存储在data属性中，因此不需要进行第二次选择：

$(function(){

   $('#sample_button').data('panel', $('#sample_kit_container'));
   $('#mail_button').data('panel', $('#mail_container'));
   $('#mbillboard_button').data('panel', $('#mbillboard_container'));

    $('.panel_button').on('click', function(){

        $('.secondary_panel').hide();
        var panel = $(this).data('panel');
        panel.show();

    });

});

Answer 3

@thomas，在我的观察中，你的解决方案实际上比其他答案更好。

在data属性中包含整个对象可能并不总是有效。例如，如果加载时$('#sample_kit_container')对象不存在，而是加载ajax，则该怎么办。

...

只有一个小评论！为什么不调用数据对象：panelId。它会更直观一些。

这是jquery data（）的可接受使用吗？

3 个答案: