Jquery .show() 无法在 HTML5 数据描述符上与 .find() 一起使用 - 需要帮助！

发布于 2024-11-19 08:01:15 字数 589 浏览 0 评论 0原文

请参阅此处的示例： http://jsfiddle.net/mzhang23/CGfzq/9/

我是使用以下代码尝试允许单击最右列中的蓝色衬衫缩略图，以在第一列和第二列中显示蓝色衬衫图像 div。（要测试这一点，请先单击中间列中蓝色衬衫上的“x”以将其隐藏）

我对蓝色衬衫的第三列图像使用了 HTML 5 data-eltype 描述符，并希望使用该描述符来找到 .show() 函数的相关类。

    <script type="text/javascript">
        $(document).ready(function(){
        $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).data('eltype')).show(250);
        });
        });    
    </script>

有什么想法为什么它不起作用吗？

原文

See example here: http://jsfiddle.net/mzhang23/CGfzq/9/

I am using the following code to try and allow a click on the blue shirt thumbnail image in the rightmost column to show the blue shirt image divs in the first and second column. (To test this, click the "x" on the blue shirt in the middle column to hide it first)

I've used an HTML 5 data-eltype descriptor for the third column image of the blue shirt and hope to use that descriptor to find the relevant class for the .show() function.

    <script type="text/javascript">
        $(document).ready(function(){
        $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).data('eltype')).show(250);
        });
        });    
    </script>

Any ideas why it's not working?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

木緿 2024-11-26 08:01:15

对于 jQuery 1.4.2，您想要的是获取属性 data-eltype 请参阅： http://jsfiddle.net /CGfzq/10/

$(document).ready(function(){
    $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).attr('data-eltype')).show(250);
    });
});

编辑

由于@mu太短指出，您尝试的方法仅适用于较新的版本。

For jQuery 1.4.2, what you want is to get the attribute data-eltype see: http://jsfiddle.net/CGfzq/10/

$(document).ready(function(){
    $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).attr('data-eltype')).show(250);
    });
});

edit

As @mu is too short points out, the method you tried will only work in more recent versions.

回复收藏 0 原文

奶气 2024-11-26 08:01:15

编辑：

正如 mu 指出的那样，最新版本的 jQuery 实际上确实利用 .data() 函数来提取 HTML5 数据属性。但我很幸运，并没有因为技术问题而给出错误的答案，因为你碰巧使用的是不支持此功能的旧版 jQuery...:-)

原文：

“data-eltype”是属性的名称，所以要使用 jQuery 选择它，您需要执行以下操作：

$(this).attr('data-eltype');

HTML5 data- 属性与 jQuery 的内置 .data() 函数完全无关。

希望这有帮助。

EDIT:

As mu pointed out, more recent versions of jQuery actually do utilize the .data() function to pull in HTML5 data- attributes. But I got lucky and escaped giving a wrong answer by the technicality that you happen to be using an older version of jQuery that does not support this... :-)

Original:

"data-eltype" is the name of the attribute, so to select it with jQuery you need to do this: