Question

我所拥有的是使用PHP生成的带有9个li项目的UL。每个人都有一个从1到9的班级。

我还有9个用PHP生成的div也有1到9个类。我正在尝试使用jQuery，这样当有人点击li项时，它的相应div会显示/隐藏......

即。点击li class 3，显示div class 3.

我有这个：

for (var i = 1; i <= 9; i++){
    $("li." + i).click(function(){
        $("div." + i).toggle();
    });
}

然而它不太有效。谁能明白为什么它可能不是？

<ul class="featureItems">

    <li class='1'>Seo</li>
    <li class='2'>Social Media</li>

    <li class='3'>Internet Marketing</li>       


    <li class='4'>Lead Generation</li>
    <li class='5'>Appointment Setting</li>
    <li class='6'>Telesales</li>        


    <li class='7'>Copyright</li>
    <li class='8'>Promotions</li>
    <li class='9'>Website Design</li>       

    </ul>


<div id="featuredItem">
    <div class='1 featureText'>i'm seo text</div><div class='2 featureText'>i'm social media text</div><div class='3 featureText'>i'm internet marketing text</div><div class='4 featureText'>i'm lead generation text</div><div class='5 featureText'>i'm appointment setting text</div><div class='6 featureText'>i'm telesales text</div><div class='7 featureText'>i'm copyright text</div><div class='8 featureText'>i'm promotions text</div><div class='9 featureText'>i'm website design text</div> </div>
</div>

输出HTML！

Answer 1

编辑2 ：这是解决问题的答案：

$('li').click(function(evt)
{
    $('div.' + $(this).attr('class')).toggle();
});

如果您的li有多个课程，则无效。如果这是一个问题，我会考虑使用其他内容来传递该信息，例如HTML5 data属性或rel属性。

Answer 2

不确定这是不是你的问题，但是用数字启动标识符（在这种情况下是类名，但ID也可能有这个问题）几乎总是一个坏主意。我建议你使用名称c1，c2，c3，c4等。可能在你的代码中的某个地方，数字名称被转换为数字而不是字符串。

你可能还会考虑更好的名字，但我希望只用字母“c”开头就可以了。

Answer 3

问题是当你在点击内部调用函数时，i的值是10。你需要一个闭包：

for (var i = 1; i <= 9; i++){
    (function (i){
        $("li." + i).click(function(){
            $("div." + i).toggle();
        });
    })(i)
}

http://jsfiddle.net/bicccio/prTH9/

jQuery简单的循环

3 个答案: