通过js取属性值

Question

先上代码

                                <div class="jiepan_swiper" data-translate-x="0" data-translate-y="0" style="">
                 <div class="Grand_Template" data-grade_id="0" data-id="8" data-teacher="9" data-video_url="http://hcympbciwsxq8223ce3.exp.bcevod.com/mda-iaphg99uzy63ajqn/mda-iaphg99uzy63ajqn.m3u8">
                    <div class="Grand_Template-center">
                        <div class="Grand_Template_left">
                            <img src="https://djsssl.gaotime.com/zuploadpic-9d9cf2ac-c389-4503-9411-d902f85c7b86.jpg" alt="图片丢失了" title="20170821大数据终端之点金手盘前盘中盘后使用教程">
                            <i></i>
                        </div>
                        <div class="Grand_Template_right">
                            <h3>20170821大数据终端之点金手盘前盘中盘后使用教程</h3>
                            <div class="Grand_Template_right_message">
                                <time>
                                    <i class="iconfont"></i>
                                    2017年08月22日
                                </time>
                                <nav>
                                    <div>
                                        <i class="iconfont"></i>
                                        65
                                    </div>
                                    <div>
                                        <i class="iconfont"></i>
                                        3
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>    
                
                 <div class="Grand_Template" data-grade_id="0" data-id="7" data-teacher="9" data-video_url="http://hcympbciwsxq8223ce3.exp.bcevod.com/mda-iapfsdzpxgkr6gb2/mda-iapfsdzpxgkr6gb2.m3u8">
                    <div class="Grand_Template-center">
                        <div class="Grand_Template_left">
                            <img src="https://djsssl.gaotime.com/zuploadpic-da25e87b-a838-4ee0-800a-e5b2e821d0e9.jpg" alt="图片丢失了" title="20170817技术大讲堂—大数据之选买持卖">
                            <i></i>
                        </div>
                        <div class="Grand_Template_right">
                            <h3>20170817技术大讲堂—大数据之选买持卖</h3>
                            <div class="Grand_Template_right_message">
                                <time>
                                    <i class="iconfont"></i>
                                    2017年08月17日
                                </time>
                                <nav>
                                    <div>
                                        <i class="iconfont"></i>
                                        36
                                    </div>
                                    <div>
                                        <i class="iconfont"></i>
                                        1
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>    
                
                 <div class="Grand_Template" data-grade_id="0" data-id="6" data-teacher="9" data-video_url="http://hcympbciwsxq8223ce3.exp.bcevod.com/mda-iapdpbj7n0rba3a8/mda-iapdpbj7n0rba3a8.m3u8">
                    <div class="Grand_Template-center">
                        <div class="Grand_Template_left">
                            <img src="http://hcympbciwsxq8223ce3.exp.bcevod.com/mda-iapdpbj7n0rba3a8/mda-iapdpbj7n0rba3a8.jpg@w_200,q_80" alt="图片丢失了" title="20170721大数据捕捉有色金属大浪潮">
                            <i></i>
                        </div>
                        <div class="Grand_Template_right">
                            <h3>20170721大数据捕捉有色金属大浪潮</h3>
                            <div class="Grand_Template_right_message">
                                <time>
                                    <i class="iconfont"></i>
                                    2017年07月31日
                                </time>
                                <nav>
                                    <div>
                                        <i class="iconfont"></i>
                                        10
                                    </div>
                                    <div>
                                        <i class="iconfont"></i>
                                        0
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>    
                </div>
                
                
                
    不看那些花里胡哨的代码内容了，这是结构

这其中的内容是动态生成的，我要去的值是data-grade_id,data-id,data-teacher,data-video_url
通过点击对应的img标签的图片获得这4个值 ，我是这么写的

    $(".jiepan").on("click","img", function(e) { 
         
                var grade_id = $(".Grand_Template").attr("data-grade_id");
                console.log(grade_id);
                var id = $(".Grand_Template").attr("data-id");
                console.log(id);
                var teacher = $(".Grand_Template").attr("data-teacher");
                console.log(teacher);
                var content = $(".Grand_Template").attr("data-video_url");
                console.log(content);
                //window.location.href = "v_play.html?grade_id=" + grade_id + "&id=" + id + "&teacher=" + teacher + "&content=" +content;

            });
            
            
            最终结果.................

我点击那3个图片都返回这个数据，怎么才能获得对应的值啊？

Answer 1

$(".jiepan_swiper").on("click","img", function() { 
    var $item = $(this).parents(".Grand_Template");
    var grade_id = $item.attr("data-grade_id");
    console.log(grade_id);
    var id = $item.attr("data-id");
    console.log(id);
    var teacher = $item.attr("data-teacher");
    console.log(teacher);
    var content = $item.attr("data-video_url");
    console.log(content);
    //window.location.href = "v_play.html?grade_id=" + grade_id + "&id=" + id + "&teacher=" + teacher + "&content=" +content;

});

Answer 2

不是很懂你想问什么？你这代码没问题啊，输出也没问题啊，哪里错了吗

---

再看了一下，你是不是这里写的有问题？

var id = $(".Grand_Template").attr("data-id");

我看你好像每个class类名都是这个Grand_Template？

那么你这一步骤获取的是三个相同class类的第一个。你是不是想获取下面几个？你这个获取的应该是一组，有好几个你可以循环提取出来

Answer 3

console.log($(".Grand_Template").data("grade_id"))

这是h5 的一个data-属性，在原生js中用dataset方法获取|设置，jq中用$('').data()来获取

这是api http://jquery.cuishifeng.cn/d...

希望对您有用，欢迎关注：前端指南 公众号