如何使用jQuery添加类以列出项目？

我有一个列表项目

我想点击任何列表来添加类，并使用jQuery从其他列表中删除。 基本上只能在当时选择一个项目。

并在按钮上单击以显示所选列表项的ID

Answer 1

这将执行您想要的操作并获取所选li img标记的ID

 $('ul > li').click(function() { $('ul > li').removeClass('active'); $(this).addClass('active'); }); $('input:button').click(function() { alert($('li.active img')).attr('id')); }); 

Answer 2

 $('li').click(function() { // should be better selector than just li $('li').removeClass('active'); // remove all active classes $(this).addClass('active'); // add active class to element clicked }); $('input[type="button"]').click(function() { alert($('li.active img').attr('id')); // get active id }); 

编辑误读了您的代码。 添加了修复以获取图像标记的ID。

Answer 3

看到它在这里工作 http://jsfiddle.net/usmanhalalit/Jbh3q/1/

我稍微改变了你的标记以匹配标准（只是添加了id ）并添加了一个红色背景以显示小提琴中的效果。

标记：

JavaScript的：

 $(function(){ $("#myul li").click(function(){ $("#myul li").removeClass('selected'); $("#myul li").css('background','none'); $(this).css('background','red'); $(this).addClass('selected'); }); $('#btn').click(function(){ alert( $('.selected img').attr('id') ); }); }); 

Answer 4

 // On li click $("li").click(function() { // Reset them $("li").removeClass("yourClass"); // Add to the clicked one only $(this).addClass("yourClass"); }); // On button click $("input[type=\"button\"]").click(function() { // Echo the id of selected li alert($(".yourClass").attr("id")); });