问答详情
源自：3-9 jQuery的属性与样式之元素的数据存储

请帮我看看jQuery为什么没有反应

我在学.data()的运用, 以下是我的html 和 jQuery代码:

    <div class="right">        
        <div class="aaron">            
            <p>点击看结果</p>            
            <p>.data</p>        
        </div>        
        <div><span></span></div>    
    </div>        
    
    <button id="btn1">Test1</button>    
    <button id="btn2">Test2</button>    
    <button id="btn3">Test3</button>
        $('#btn3').click(function(){            
            $('.right .aaron span').data("a", "I'm the cool kid!");            
            $('.right .aaron span').data("b", "My name is: ");            
        // 
            $('.right .aaron span').data("a", {            
                name:"Ray",
                age:20
            });            
            var f = $('.right .aaron span').data("a") + "</br>" + $('.right .aaron span').data("b") + "</br>";             
            $('.right .aaron span').find('span').append(f);       
        })

我本来想按了btn3 按钮以后在 <span></span>里会出现我给的data变量 可惜按了后没有反应 :( 求大神帮忙

提问者：raylism 2018-08-14 18:19

个回答

  • 等你到天明
    2018-08-15 07:15:39
    已采纳

    代码如下

    $('#btn3').click(function(){            

                $('.right .aaron').data("a", "I'm the cool kid!");            

                $('.right .aaron').data("b", "My name is: ");                        

                var f = $('.right .aaron').data("a") + "</br>" + $('.right .aaron').data("b") + "</br>";             

                $('.right').find('span').append(f); 

                console.log($('.right .aaron')) ;     

            })

    这里几个问题 

    1. span标签在right下第二个div里  '.right .aaron span'这样选中绑定在document上跟你想绑定位置

    2. 在你js中的第5行代码“a”和上面的“a”重复了会把之前的覆盖掉

    3. 第5行“a”里面传入的数据是个对象 所以如果要最后添加的话返回的是【Object，Object】

    个人建议：

        如果你直接学的jQuery的话，我觉得应该先去学原生的javaScript，然后学会如何自己调试，在网页上F12可以打开控制台，自己解决不了先baidu，然后在问题可以

    1
  • 慕粉_蓝
    2018-08-18 18:56:12

    这样也是一样的

    $('#btn3').click(function(){

                $('.right .aaron span').data("a", "I'm the cool kid!");            

                $('.right .aaron span').data("b", "My name is: ");            

                $('.right .aaron span').data("c", {            

                    name:"Ray",

                    age:20

                });            

                var f = $('.right .aaron span').data("a") + "<br/>" + $('.right .aaron span').data("b") + ""

    + $('.right .aaron span').data("c").name + "<br/>" + $('.right .aaron span').data("c").age;             

                $('.right .aaron').find('span').append(f);       

            })


    0
  • 慕粉_蓝
    2018-08-18 18:55:01

    你的后一个a覆盖了前面的,导致取值的时候取不到

    $('#btn3').click(function(){

                $('.right .aaron').data("a", "I'm the cool kid!");            

                $('.right .aaron').data("b", "My name is: ");            

                $('.right .aaron').data("c", {            

                    name:"Ray",

                    age:20

                });            

                var f = $('.right .aaron').data("a") + "<br/>" + $('.right .aaron').data("b") + ""

    + $('.right .aaron').data("c").name + "<br/>" + $('.right .aaron').data("c").age;             

                $('.right .aaron').find('span').append(f);       

            })


    0
  • Ooooooops
    2018-08-14 23:29:27

    $('.right .aaron span')和$('.right .aaron span')这两个选择器写错了

    0