Question

有问题的代码：

$("#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。

Answer 1

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

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

Answer 2

每个文档的

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>元素

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

2 个答案: