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

The code below is showing and hiding div content with dynamically generated id's like div_1, div_2 from div id, all seems working fine except that it requires to hide one div content at a time like clicking div_1 should open its content and on clicking div_2 should hide div_1. please help me sort out this problem.

下面的代码显示和隐藏div内容与动态生成的id,例如div_1,div_2来自div id,所有似乎都正常工作,但它需要一次隐藏一个div内容,例如点击div_1应该打开其内容并点击div_2应该隐藏div_1。请帮我解决这个问题。

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";
}

Below is the javascript to make the code workable. but its showing or hiding all the div contents at a time.

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

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

this is a piece of updated html code that's what browser is rendering.

这是一段更新的HTML代码,它是浏览器呈现的内容。

<div class='container2'><ul class='taby'><li class='dropown'><a name='form_a_1' href='#div_1'   id='form_a_1' value='1' onclick='return divclick(this,"div_1");'>Who</a></li></ul>
<div id='div_1' class='section'>
<table border='0' cellpadding='0'>
<div id='div_2' class='section'>
<table border='0' cellpadding='0'>
<div id='div_3' class='section'>
<table border='0' cellpadding='0'>

2 个解决方案

#1

If you are using jquery in the page you can add one line in your code

如果您在页面中使用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;
}

If you are not using jquery on the page it gets a little more complicated but can be done with only adding a few lines.

如果你没有在页面上使用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;
}

#2

This is really too messy to work with and understand. You should consider cleaning up the way you dynamically render html, and it would make problems like this a lot easier to solve when you ran into them. Or prevent them all together.

这真的太乱了,无法使用和理解。你应该考虑清理你动态渲染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'>

etc....

If you render all of your html in echo strings, you'll find it very hard to deal with later on. Especially, when you're working on applications which large amounts of rendering.

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

#1