0

我是 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类，现在我选择了subcompany2作为这个应用selected类，但这次我想删除子公司类。我怎样才能做到这一点？

4

9 回答 9

1

问题看起来像您针对所有li元素，包括父元素，而不是仅针对那些在uid

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

演示：小提琴

于 2013-08-28T08:00:43.683 回答
1

以这种方式修改您的 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');
    });
});
于 2013-08-28T08:04:05.610 回答
0

你的代码是对的。由于您已在 head/body 中添加了此脚本，因此无法正常工作。

所以把它包起来$(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');
    })
});
于 2013-08-28T08:02:14.327 回答
0

删除onclickatli并在文档准备好时添加处理程序：

$(document).ready(function(){
  $('ul li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
    callTest();
  })
});
于 2013-08-28T08:03:37.940 回答
0

li 元素中不需要 onclick 属性。删除那些

于 2013-08-28T08:06:16.943 回答
0

它实际上工作正常

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

这是演示：JsFiddle

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

于 2013-08-28T08:01:34.707 回答
0

演示

$('li').click(function (e) {
    $('li').removeClass('selected');
    $(e.target).addClass('selected');
})
于 2013-08-28T08:03:42.160 回答
0

这里有一个 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');
    })
于 2013-08-28T08:04:17.347 回答
0

在 che click 处理程序中调用 callTest()。

于 2013-08-28T08:04:58.987 回答