Почему функция jquery не может быть выполнена для двух изображений с одинаковым идентификатором

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 вернет все элементы, которыеесть этот идентификатор, и функция Jquery будет выполняться, как только пользователь наведет указатель мыши на любой из намеченных элементов?BR

Answer 1

Наличие нескольких элементов с одинаковым 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 2

Идентификаторы должны быть уникальными. Собственный метод javascript, который jQuery использует document.getElementById(), возвращает только первый найденный элемент с определенным идентификатором.

Если вы выбираете элементы, используя jQuery по идентификатору, он вернет только один элемент, поскольку с таким идентификатором может быть только один действительный элемент. Хотя есть некоторые крайние случаи, когда я видел, как это работает, например, с плагином jquery corners, хотя даже это не работает во всех браузерах, когда не используются уникальные идентификаторы.

Answer 3

Нет, он получит коллекцию одного Id с именем # to-get-large, и ID должен быть уникальным на странице, вместо этого вы должны использовать класс css.http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 дает вам спецификацию w3c о том, как это работает.