Get attribute values through js

Code first 

                                <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>
                                    20170822
                                </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>
                                    20170817
                                </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>
                                    20170731
                                </time>
                                <nav>
                                    <div>
                                        <i class="iconfont"></i>
                                        10
                                    </div>
                                    <div>
                                        <i class="iconfont"></i>
                                        0
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>    
                </div>

clipboard.png
data-grade_id,data-id,data-teacher,data-video_url
img4

clipboard.png
I click on the three images to return this data. How can I get the corresponding value?

Java javascript
Jun.30,2021

I don't quite understand what you want to ask. There's nothing wrong with your code, and so is the output. What's wrong with it?

< hr >

look at it again. Is there something wrong with what you write here? 

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

it seems to me that every class class name is this Grand_Template ?

so the you get in this step is the first of the three same class classes. Do you want to get the following? What you get should be a group, and there are several that you can cycle out

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

this is a data- attribute of h5, which is obtained by dataset method in native js. Use $(''). Data ()) to get

in jq.

this is api http://jquery.cuishifeng.cn/d.

hope to be useful to you, welcome to follow: Front end Guide official account 
$(".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;

});

Previous: Monitor video playback time?

Next: Nuxt-link listens for routing changes and executes multiple times

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31aee-2b118.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31aee-2b118.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?