Question

在此类代码中将.data("blog-title")悬停在.avatar上时，会遇到此值：{/ 1}}：

<a target="_blank" href="http://somwhere.com/"  class="frame">
<img alt="" class="avatar" src="http://something.com/pong.png/>
        </a>
        <script type="text/javascript">
            some script stuff
        </script>

            <div class="note">
                        <a target="_blank" class="preview" href="http://something.com/blogpost/bar"><img src="http://http://something.com/some.gif" /></a>
                <a href="#" data-blog-title="fooname" class="block">foobar</a>
            </div>

尝试了各种父母，发现等等。只是无法解决它。

Answer 1

试试这个： -

假设您有多个这样的部分，可以尝试这种方式

$('.avatar').hover(function(){
var value = $(this)
          .closest('.frame') // Get to the parent .frame
          .siblings('.note') // look for its sibling .note
          .find('.block') //find the anchor with class.block
          .data('blog-title'); //get the value. If this attribute value is being changed dynamically after the load then you need to use .attr('data-blog-title')

});

否则只做

 $('.block').data('blog-title');

http://jsfiddle.net/kNntX/

请记得在此处关闭引号

<img alt="" class="avatar" src="http://something.com/pong.png/">
                                                              ^----------

Answer 2

这样的事情应该可以使用data：

$(".avatar").hover(function(e){
    alert($('.block').data('blog-title'));
}, function() {

});

JS Fiddle Demo

http://api.jquery.com/data/#data-html5

Answer 3

这应该有用吗？（jsfiddle）

$(function() {
   $(".avatar").mouseover(function() {
     console.log($(".block").data('blog-title'));  
   });
});

Answer 4

首先，我建议您将所有<script>标记保存在HTML文件的一个位置，这样可以提高可读性，并且更容易查看触发的内容及其发生的顺序。

话虽这么说，你可能想要做这样的代码：

请注意，在您当前的HTML代码中，您所使用的元素称为.block

 <script>
       //wait for the document to be ready before triggering
       $(document).ready(function(){
           $('.avatar').hover(function(){
               var title =  $(this).next('.note').children('.block').attr("data-blog-title");
               //do something with title now that you've loaded it.
              },
           //callback
           function(){ 
             //something else on mouseout
           });
});
</script>

请注意我没有对此进行过测试，但只需稍加调试就可以了。

Answer 5

尝试

$(function() {
   $(".avatar").mouseenter(function() {
     var blogTitle = $(this).closest('.frame').find('.block').data('blogTitle');
     console.log(blogTitle );  
   });
});

使用JQuery解决这个问题的麻烦

5 个答案: