Question

我的asp.net MVC应用程序中有以下脚本来反弹图像

   $(document).ready(function () {
        $("#to-get-bigger").mouseover(function () {
            $(this).effect("bounce", { time: 3, distance: 40 });
        });
    });

在视图中我有以下两个具有相同Id的图像： -

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
   <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

 <a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" 
onclick = "return confirm('This will make the Assessment avilable for the regestred user.')" > 
   <img id = "to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

但问题是Jquery函数只会执行并弹回一个图像，而它不能在第二个图像上工作，虽然我已经读过Jquery选择器在这种情况下#to-get-bigger将返回所有一旦用户在任何目标元素上移动鼠标，将执行具有此ID和Jquery函数的元素？ BR

Answer 1

Id必须是唯一的。 jQuery使用document.getElementById()的本机javascript方法仅返回它找到的具有特定ID的第一个元素。

如果按ID使用jQuery选择元素，它将只返回一个元素，因为只有一个有效元素具有该ID。有一些边缘情况，虽然我已经看到它工作，例如使用jquery角落插件，但即使在不使用唯一ID时也不适用于所有浏览器。

Answer 2

具有相同id的多个元素无效，并导致此类问题。 id属性应该是唯一的。要使用单个属性引用多个元素，请使用class：

HTML

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')" > 
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

<a href="@Url.Action("StartAssessment", "StartAssessment", new { assessmentid = Model.AssessmentID })" onclick="return confirm('This will make the Assessment avilable for the regestred user.')">
    <img class="to-get-bigger" border="0" src="@Url.Content("~/content/images/assessment-button1.jpg")" alt="start assessment" />
</a>

的jQuery

$(document).ready(function () {
    $(".to-get-bigger").mouseover(function () {
        $(this).effect("bounce", { time: 3, distance: 40 });
    });
});

Answer 3

不，它会获得一个名为＃to-get-greater的ID的集合，并且ID必须在页面上是唯一的，您应该使用css类。 http://www.w3.org/TR/html4/struct/global.html#h-7.5.2为您提供有关其工作原理的w3c规范。

为什么不能对具有相同ID的两个图像执行jquery函数

3 个答案: