软件开发平台列表中class类选择器使用陷阱

软件开发平台列表中class类选择器使用陷阱,只会认循环列表中第一个。

软件开发平台class类选择器

如上图所示,一个列表,里面有很多的项目,代码如下:

                @foreach (var m in Model.DataSource)
                {
                    var picPath = "/Content/uploads/" + m.Picture;
                    if (m.Picture == null || m.Picture == "")
                    {
                        picPath = "/Content/uploads/fd9005b160824f67b0f99c6a0219307d.jpg";
                    }
                    <tr>
                        <td style="width: 110px"><a href="#" data-id="@m.Id" class="btn-program" title="@Html.Raw(m.ProgramDescrip)">
<img style="width:78px; height:52px;" src="@picPath" alt="@Html.Raw(m.Name)"></a></td> <td style="width: 400px; vertical-align: middle; "><a href="#" data-id="@m.Id" class="btn-program"
title="@Html.Raw(m.ProgramDescrip)">@m.Name</a></td> <td style="width: 100px; vertical-align: middle;">@Html.FormatDatatime(m.CreateAt)</td>
@if (ViewBag.IsPlatManager || ViewBag.IsMainAccount) { if (m.State == 2) { star = "glyphicon-star"; } else { star = "glyphicon-star-empty"; } <td style="width: 300px; vertical-align: middle;"> <div class="onshow"> <a class="btn-lg" href="/ProgramManage/Edit/@m.Id" title="打开项目设置"><span class="glyphicon glyphicon-edit"></span></a> <a class="btn-lg btn-copy" href="#" data-id="@m.Id" title="复制该项目"><i class="fa fa-files-o"></i></a> <a class="btn-lg btn-star" href="#" data-id="@m.Id" title="星标"><i class="fa fa-star-o @star"></i></a> <a class="delete btn-lg btn-delete" href="#" data-id="@m.Id" title="移入回收站"><i class="fa fa-trash-o"></i></a> </div> </td> } </tr> }
复制代码为:
<a class="btn-lg btn-copy" href="#" data-id="@m.Id" title="复制该项目"><i class="fa fa-files-o"></i></a>

btn_copy JavaScript软件开发平台脚本如下:

 $(".btn-copy").bind("click", function () {
            var pid = $(".btn-copy").attr("data-id");
            layer.confirm('确定要复制该项目吗?', { btn: ['确认', '取消'] }, function () {
                $.post('@Url.Action("Copy")', { id: pid }, function (data) {
                    if (data.Status) {
                        $('#ProgramManageListForm').submit();
                    }
                    else {
                        ShowNotice(data.Message, "danger");
                    }
                }, "json");
                layer.close();
            }, function(){
                layer.close();
                });
            });

错误现象:无论点击哪个复制按钮,每次复制都是复制的第一行的数据,页面数据传给js脚本都是通过juqery选择来的,本实例中用的 $(".btn-copy").attr("data-id");这段代码,可以看到是用class选择器.btn-copy。

问题解决:用的这个选择器肯定是错误的,因为在列表中每一项都有一个class="btn-copy",故而该选择器只能识别第一列表项的class,导致每次传给脚本的id是第一项的id。那怎么解决呢,我们必须获取当前行的id值,将".btn-copy"改为this即可,如下代码:

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

软件开发平台列表中class类选择器使用陷阱,只会认循环列表中第一个。

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发平台列表中class类选择器使用陷阱
本文标题:软件开发平台列表中class类选择器使用陷阱
本文地址:https://www.hocode.com/OrgTec/UI/0036.html

相关文章: CSS3盒子模型

电话
电话 18718672256

扫一扫
二维码