有助于通过我的jquery片段重申一下

时间:2010-12-30 22:43:58

标签: jquery

有问题的代码:

$("#alpha").click(function(event) {
    event.preventDefault();
    $("#show").slideToggle();
});

我有一个文件列表,它按字母顺序用PHP输出。我在PHP中使用这个方法:

foreach(range('A','Z') as $i) {
    if (array_key_exists ("$i", $alpha)) {
        echo '<div id="alpha"><a href="#" name="'.$i.'"><h2>'.$i.'</h2></a></div><div id="show">';
        foreach ($$i as $key=>$value)
            echo '<p>'.$value.' '.$key.'</p>';
    }
    echo '</div>';
}

我想要做的是当用户点击#alpha来切换具有属于某个字母的名称的div #show时。我可以在第一个列表中执行此操作,但之后的每个列表都不会受到影响。

我怎么能告诉jquery foreach字母应用js代码,以便它可以向上/向下切换#show。

我不想这26次(字母表中每个字母一次),我试图使用class而不是id,但这导致所有#show切换为heh。

2 个答案:

答案 0 :(得分:2)

ID属性must be unique。在生成的标记中使用类属性而不是ID,并定位与所点击的.show相对的.alpha

$(".alpha").click(function(event) {
    event.preventDefault();
    $(this).next(".show").slideToggle();
});

答案 1 :(得分:1)

每个文档的

id属性应该是唯一的。请尝试使用class

echo '<div class="alpha">...';

不要忘记相应地更新你的javascript

$('.alpha').click(...

如果我可以重写你的PHP

foreach(range('A','Z') as $i) {
    if (array_key_exists ($i, $alpha)) { // don't need quotes around $i
        echo '<div class="alpha"><a href="#" name="'.$i.'"><h2>'.$i.'</h2></a></div><div id="show">';
        foreach ($$i as $key=>$value) {
            echo "<p>$value $key</p>"; // looks cleaner with double quotes
        }
    }
    echo '</div>';
}

是的,h2

中不允许使用<a>元素