Question

Razor Code：

@foreach(var item in Model)
{
<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  data-id=@item.ProductID onclick="fun_ShowImages()" >@Website.ShowImages</button>
}

function fun_ShowImages() {
        var id = $(this).attr("id");
        var htmlContents = " ";
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

强文这里错误：

我需要知道id属性 var id = $（this）.attr（“id”）; //这给了我一个未定义的

Answer 1

在您的示例中，this是对window对象的引用。

您可以直接传递id值作为参数。

@foreach(var item in Model)
{
   <button type="button" class="ShowImages" data-toggle="modal"
   id="@item.ProductID" data-target="#myModal"  
   data-id=@item.ProductID onclick="fun_ShowImages(@item.ProductId)" >@Website.ShowImages</button>
                                            ^^^^^^^^^^^^^^^^^^^^^^
}

function fun_ShowImages(id) {
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

另一种方法是附加click事件处理程序并使用$(this)选择器。

此外，在这种情况下，您必须对.on使用event delegation方法，尤其是对于已添加动态的元素。

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    var htmlContents = " ";
    $.ajax({
        url: "/Products/ShowImage/" + id,
        type: "POST",
        contentType: 'application/json',
        success: function (response) {
           ...
            }
            htmlContents += '</table>';
            $('#ProductImages').html(htmlContents);
        },
        error: function (response) {
           ...
        }
    });
});

Answer 2

首先，您应该为data-id值添加引号：

<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  data-id="@item.ProductID" onclick="fun_ShowImages()" >@Website.ShowImages</button>

然后你可以使用jQuery事件处理程序click

E.g：

$(document).ready(function () {
    $(".ShowImages").click(function () {
        var id = $(this).attr("id"); //or you can use data-id value
        //your logic...
    });
});

或者您可以使用jQuery.on()

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    //your logic
});

Answer 3

根据您的代码this不引用调用事件处理程序的元素，它引用window对象。因此，你得到了错误。

您可以使用.call()设置上下文

<button type="button"  onclick="fun_ShowImages.call(this)" >@Website.ShowImages</button>

function fun_ShowImages() {
  console.log(this.id);
}

<button type="button" id="1" onclick="fun_ShowImages.call(this)">ShowImages</button>

MVC如何使用jquery获取id值

3 个答案: