Question

我是jQuery的新手。我想将css类应用于我的<li>元素，但它不起作用。任何人都可以帮助我吗？

我的标记是：

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
    </ul>

  <ul id='uid'>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
    </ul>
    </li>
</ul>

我的问题是，当我调用callTest()方法时，我想更改<li>的背景颜色，我尝试这种方式不起作用：

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

它工作正常，但是第一次我选择子公司它已应用selected类，现在我选择了子公司2 ，因此也应用了selected但是在这个时候我想删除子公司类。我怎么能这样做？

Answer 1

问题似乎是您定位所有li个元素，包括父级，而不是仅定位uid

下的元素

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

演示：Fiddle

Answer 2

以这种方式修改HTML：

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li>subcompany</li>
        <li>subcompany</li>
        <li>subcompany</li>
    </ul>
</ul>

以这种方式添加这个JS：

$('#uid > li').each(function () {
    $(this).on("click", function() {
        console.log("call lil...'");
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

Answer 3

实际上工作正常

$('ul li').click(function(){
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
});

以下是演示：JsFiddle

检查你的html文件。一定有问题，包括你的脚本或jquery。

Answer 4

你的代码是对的。由于您已在头部/身体中添加此脚本，因此无法正常工作。

所以只需将其包裹在$(document).ready(function()..

中

$(document).ready(function(){
$('ul li').click(function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

还尝试使用 .on() 这样的事件处理程序

$(document).ready(function(){
$('ul li').on('click', function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

Answer 5

删除onclick处的li并在文档准备就绪时添加处理程序：

$(document).ready(function(){
  $('ul li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
    callTest();
  })
});

Answer 6

DEMO

$('li').click(function (e) {
    $('li').removeClass('selected');
    $(e.target).addClass('selected');
})

Answer 7

这里有一个HTML问题：

<ul class='change'>
    <li>companyName
        <ul id='uid'>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
        </ul>
    </li> <!-- I moved this one -->
</ul>

关于你的jQuery你可以这样做：

$('ul.change > li').click(function(){ //Only applies to the direct child of ul.change
    console.log("call lil...'");
      $(this).addClass('selected');
    })

Answer 8

在che click handler中调用callTest（）。

Answer 9

li元素中不需要

onclick属性。删除那些

如何在runTime上应用css类

9 个答案: