Противопожарные мероприятия на более чем одного элемента в HTML

Question

У меня есть код JQuery

$(function() { 
    $("input").on("mouseover", function() { 
     var a = $('input').attr('name'); 
     populate(a); 
    }); 
}); 

У меня есть три входных элементов.

Computer Language: <br> 
    <div> 
     <datalist id="language"></datalist>   
     <input type="text" list="language" name= "language" id="search"/>   
    </div>  
    <br> 
    Country: <br> 
    <div> 
     <datalist id="country"></datalist>   
     <input type="text" list="country" name= "country" id="search" />    
    </div> 
    <br> 

    Degree: <br> 
    <div> 
     <datalist id="degree"></datalist>   
     <input type="text" list="degree" name= "degree" id="search"/>   
    </div> 

Теперь mouseover событие только пожары, которые имеют название language (или верхний элемент ввода). Почему mouseover событие не запускается для 2-го и 3-го элементов ввода?

Answer 1

Примечание:id s не должны дублироваться. Вы использовали id="search" много раз.

Вы должны использовать контекстно-чувствительнуюthis ключевое слово:

$(function() { 
    $("input").on("mouseover", function() { 
    var a = $(this).attr('name'); 
    populate(a); 
    }); 
}); 

Чтобы ответить на ваш вопрос:

Причина в том, вы выполняете .attr() (, который одна из многих функций, которая обрабатывает только один элемент) на первом совпадающем элементе.

Answer 2

Вам нужно обратиться к текущему элементу, который выполняется с помощью $(this), this Обратитесь к элементу, который вызывает событие. $(this) вернет объект. В то время как $('input').attr('name') будет относиться к первому input элементу

var a = $(this).attr('name'); 

JSFIDDLE

Answer 3

Вы можете использовать параметр обработчика:

$("input").on("mouseover", function(e) { 
     var a = $(e.target).attr('name'); 
     populate(a); 
}); 

e.target является exatcly элемент вы ищете.

Вы можете использовать непосредственно Javascript вместо того, чтобы преобразовать элемент в объект JQuery:

$("input").on("mouseover", function(e) { 
     var a = e.target.getAttribute('name'); 
     populate(a); 
}); 

Answer 4

В JQuery код, который вы всегда получаете «язык»input, потому что это первый input в дом, а ваш код поиск первый input.

Изменить код JQuery, как показано ниже:

$(function() { 
    $("input").on("mouseover", function() {   
     var a = $(this).attr('name'); 
     populate(a); 
    }); 
});