Question

我有一个像

这样的列表项

<ul>
    <li><img id="1" src="" /></li>
    <li><img id="2" src="" /></li>
    <li><img id="3" src="" /></li>
</ul>

<input type="button" >

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

和按钮单击以显示所选列表项的ID

Answer 1

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

中li标记的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）并添加了一个红色背景以显示小提琴中的效果。

<强>标记：

<ul id="myul">
    <li><img id="1" src="" /></li>
    <li><img id="2" src="" /></li>
    <li><img id="3" src="" /></li>
</ul>

<input id="btn" type="button" value="click" />

<强> 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"));
});

如何使用jQuery在列表项上添加类？

4 个答案: