1

我正在使用 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();

    });

});
4

3 回答 3

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();

});
于 2012-10-23T16:13:17.320 回答
1

另一种选择是将实际的 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();

    });

});
于 2012-10-23T16:13:53.050 回答
0

@thomas，在我看来，您的解决方案实际上比其他答案中的解决方案更好。

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

...

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

于 2012-10-23T16:18:26.870 回答