Jquery .show() not working with .find() on HTML5 data descriptor - help needed!
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开发者_如何学C. (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?
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.
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:
$(this).attr('data-eltype');
The HTML5 data- attributes are completely unrelated to jQuery's built-in .data() function.
Hope this helps.
精彩评论