jquery - 无法使用jquery点击div

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

ID 在 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、Class 和所有内容的所有内容，您应该实现它，并且，

只需添加此脚本即可获得所需的内容

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

$(".menuitem").css("background-color", "");额外的行将清除以前的红色项目。

小提琴