php - jQuery 简单的 for 循环

Question

我拥有的是用 PHP 生成的 UL，其中包含 9 li 项。每个都有一个从 1 到 9 的类别。

我还有用 PHP 生成的 9 个 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 属性。