Не удается получить щелчок div с помощью jquery

Question

Я пытаюсь изменить цвет фона щелкнутого div, которые являются элементами меню.

вот мой код:

<div id="leftpanel"> 
<h4>Menu</h4> 
<div id="menuitem" onclick="menuItemClicked('Inicio');">Inicio</div> 
<div id="menuitem" onclick="menuItemClicked('Ventas');">Ventas</div> 
<div id="menuitem" onclick="menuItemClicked('Consultas');">Consultas</div> 
<div id="menuitem" onclick="menuItemClicked('Notas');">Notas</div> 
<div id="menuitem" onclick="menuItemClicked('Ingreso de mercaderia');">Ingreso de mercaderia</div> 
<div id="menuitem" onclick="menuItemClicked('Ingreso de categoria');">Ingreso de categoria</div>    
<div id="menuitem" onclick="menuItemClicked('salir');">salir</div> 

</div> 

и .js файл

$(document).ready(function() 
{ 
$("#menuitem").click(function() { 
$(this).css("background-color","red");  
}); 
}); 

Answer 1

идентификаторы должны быть уникальными в HTML. Рассмотрите возможность использования имен классов вместо:

<div id="leftpanel"> 
<h4>Menu</h4> 
<div class="menuitem" onclick="menuItemClicked('Inicio');">Inicio</div> 
<div class="menuitem" onclick="menuItemClicked('Ventas');">Ventas</div> 
<div class="menuitem" onclick="menuItemClicked('Consultas');">Consultas</div> 
<div class="menuitem" onclick="menuItemClicked('Notas');">Notas</div> 
<div class="menuitem" onclick="menuItemClicked('Ingreso de mercaderia');">Ingreso de mercaderia</div> 
<div class="menuitem" onclick="menuItemClicked('Ingreso de categoria');">Ingreso de categoria</div>    
<div class="menuitem" onclick="menuItemClicked('salir');">salir</div> 

</div> 

а также JavaScript:

$(document).ready(function() 
{ 
$(".menuitem").click(function() { 
$(this).css("background-color","red");  
}); 
}); 

Answer 2

использовать class вместо того id «s

Что-то вроде этого:

<div id="leftpanel"> 
    <h4>Menu</h4> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Inicio</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ventas</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Consultas</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Notas</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ingreso de mercaderia</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ingreso de categoria</div> 
    <div class="menuitem" onclick="menuItemClicked($(this).text());">salir</div> 
</div> 

, а затем,

$(document).ready(function() { 
    $(".menuitem").click(function(){ 
     $(this).css("background-color","red");  
    }); 
}); 

Answer 3

Все, что другие говорили о HTML, Id, класс и все, Вы должны осуществить это, и

Просто добавьте этот скрипт, чтобы получить то, что вам нужно

$(document).ready(function() { 
    $(".menuitem").click(function() { 
     $(".menuitem").css("background-color", ""); 
     $(this).css("background-color", "red"); 
    }); 
}); 

$(".menuitem").css("background-color", ""); дополнительная линия будет чистить ранее красные предметы.

Fiddle