zoukankan      html  css  js  c++  java
  • 根据on,获取选中的元素

    打钩的元素有个on的class。

            // 礼物发送
            function send_gift() {
                var type,diamond,name,id;
                var list   = $('.live .on');
                var length = list.length;
                console.log(length);
                if(length == 0){
                    toast('请勾选要发送的礼物');
                }else{
                    // 默认获取第一个匹配的元素信息
                    id = list.data('id');
                    diamond = list.data('diamond');
                    name = list.data('name');
                    type = list.data('type');
    
                    //  alert(id+"-"+diamond+"-"+name+"-"+type);
                }
            }
    

    点击发送按钮,选中这个元素。

        <div class="gift_more" id="gift">
                <div class="gift_more_mask" onclick="giftmask()"></div>
                <div class="gift_more_popup">
                    <div id="aui-slide">
                        <div class="aui-slide-wrap live">
                            <div class="aui-slide-node">
                                <div class="aui-grid">
                                    <div class="aui-row">
                                        <div class="aui-col-xs-3 gift_item on" data-id="1" data-diamond="1" data-type="little" data-name="爱心小熊">
                                            <img src="../image/live/gift/s_gift_1.png" class="gift_img">
                                            <div class="aui-grid-label">爱心小熊</div>
                                            <div class="gift_more_popup_labe">1云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="2" data-diamond="2" data-type="little" data-name="棒棒糖">
                                            <img src="../image/live/gift/s_gift_2.png" class="gift_img">
                                            <div class="aui-grid-label">棒棒糖</div>
                                            <div class="gift_more_popup_labe">2云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="3" data-diamond="5" data-type="little" data-name="冰淇淋">
                                            <img src="../image/live/gift/s_gift_3.png" class="gift_img">
                                            <div class="aui-grid-label">冰淇淋</div>
                                            <div class="gift_more_popup_labe">5云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="4" data-diamond="52" data-type="little" data-name="钻戒">
                                            <img src="../image/live/gift/s_gift_4.png" class="gift_img">
                                            <div class="aui-grid-label">钻戒</div>
                                            <div class="gift_more_popup_labe">52云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="5" data-diamond="520" data-type="big" data-name="告白气球">
                                            <img src="../image/live/gift/s_gift_5.png" class="gift_img">
                                            <div class="aui-grid-label">告白气球</div>
                                            <div class="gift_more_popup_labe">520云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="6" data-diamond="666" data-type="big" data-name="金话筒">
                                            <img src="../image/live/gift/s_gift_6.png" class="gift_img">
                                            <div class="aui-grid-label">金话筒</div>
                                            <div class="gift_more_popup_labe">666云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="7" data-diamond="999" data-type="big" data-name="皇冠">
                                            <img src="../image/live/gift/s_gift_7.png" class="gift_img">
                                            <div class="aui-grid-label">皇冠</div>
                                            <div class="gift_more_popup_labe">999云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="8" data-diamond="1200" data-type="big" data-name="保时捷">
                                            <img src="../image/live/gift/s_gift_8.png" class="gift_img">
                                            <div class="aui-grid-label">保时捷</div>
                                            <div class="gift_more_popup_labe">1200云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="aui-slide-node">
                                <div class="aui-grid">
                                    <div class="aui-row">
                                        <div class="aui-col-xs-3 gift_item" data-id="9" data-diamond="888" data-type="big" data-name="心钻皇冠">
                                            <img src="../image/live/gift/s_gift_9.png" class="gift_img">
                                            <div class="aui-grid-label">心钻皇冠</div>
                                            <div class="gift_more_popup_labe">888云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
                                        <div class="aui-col-xs-3 gift_item" data-id="10" data-diamond="999" data-type="big" data-name="水晶鞋">
                                            <img src="../image/live/gift/s_gift_10.png" class="gift_img">
                                            <div class="aui-grid-label">水晶鞋</div>
                                            <div class="gift_more_popup_labe">999云钻</div>
                                            <i class="gift_alt"></i>
                                        </div>
    
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="aui-slide-page-wrap"><!--分页容器--></div>
                    </div>
                    <div class="gift_more_bottom">
                        <span class="aui-col-xs-3 gift_send2">我的账单</span>
                        <span class="aui-col-xs-3 gift_send1">余额:<span id="diamond_num"></span></span>
                        <span class="aui-col-xs-3 gift_send1" style="color:#33B140;" ><span onclick="openWinPro('living_recharge');">充值</span></span>
                        <span class="aui-col-xs-3 aui-btn-sm aui-btn-info gift_send" onclick="send_gift();">发送</span>
                    </div>
                </div>
            </div>
    
  • 相关阅读:
    [转] Vue + Webpack 组件式开发(练习环境)
    [转] 从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
    [转] Redux入门教程(快速上手)
    [转] 前端数据驱动的价值
    [转] React风格的企业前端技术
    [转] 对Array.prototype.slice.call()方法的理解
    [转] webpack之plugin内部运行机制
    [转] 静态资源的分布对网站加载速度的影响/浏览器对同一域名下并发加载资源数量
    Mysql 版本号、存储引擎、索引查询
    linux 查看CPU、内存、磁盘信息命令
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/7285756.html
Copyright © 2011-2022 走看看