Question

下面的代码显示并隐藏了来自dynamically generated id's div_1, div_2的{{1}}的div内容，一切似乎都正常，但它需要一次隐藏一个div内容，例如点击div_1应该打开它的内容，点击div_2应该隐藏div_1。请帮我解决这个问题。

div id

以下是使代码可行的javascript。但它一次显示或隐藏所有div内容。

echo "<span class='bold'><a name='form_a_$group_seq' href='#div_$group_seq' id='form_a_$group_seq' value='1' " .
"onclick='return divclick(this,\"div_$group_seq\");'";
 if ($display_style == 'block') echo "clicked";
 echo "<b>" . xl_layout_label($group_name) . "</b></a></span>\n";

 echo "<div id='div_$group_seq' class='section' style='display:$display_style;'>\n";
 echo " <table border='0' cellpadding='0'>\n";
 $display_style = 'none';
}
else if (strlen($last_group) == 0) {
echo " <table border='0' cellpadding='0'>\n";
}

这是一段更新的HTML代码，是浏览器正在呈现的内容。

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}

Answer 1

这真的太乱了，无法使用和理解。你应该考虑清理你动态渲染html的方式，这会让你遇到这样的问题更容易解决。或者一起阻止它们。

<span class='bold' style='background:#0DCAD1'>


<a name="<?php echo "form_a_$group_seq";?>" href="<?php echo "#div_$group_seq";?>" id="<?php echo "form_a_$group_seq";?>" value='1'>

等...

如果你在echo字符串中渲染所有html，你会发现以后很难处理。特别是，当您处理大量渲染的应用程序时。

Answer 2

如果您在页面中使用jquery，则可以在代码中添加一行

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        $(".section").css('display', 'none');
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}

如果你没有在页面上使用jquery，它会变得有点复杂，但只需添加几行即可完成。

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        var sections = document.getElementsByClassName('section');
        Array.prototype.forEach.call(sections, function(section){
            section.style.display = 'none';
        });
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}

使用javascript显示和隐藏动态生成的ID

2 个答案: