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

下面的代码显示和隐藏div的内容dynamically generated id's像div_1, div_2从div id，似乎都工作正常，除了它需要隐藏一次div内容像点击div_1应该打开它的内容并点击div_2应该隐藏div_1。请帮我解决这个问题。使用javascript显示和隐藏动态生成的ID

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

下面是使代码可用的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; 
}

这是一段更新的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'>

来源

2014-09-26 vinesh

您应该提供呈现的HTML代替PHP代码。 – Regent 2014-09-26 20:40:25

PHP在这里无关紧要。请发布呈现的HTML示例。 – j08691 2014-09-26 20:40:39

HTML是从PHP文件呈现应该我张贴这个PHP文件？ – vinesh 2014-09-26 20:43:12

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

来源

2014-09-26 22:04:23

它不工作，点击按钮显示的内容没有隐藏以前打开的内容..这是如此混乱。 – vinesh 2014-09-26 22:33:24

现在感谢您的工作，再次感谢您的帮助。 – vinesh 2014-09-26 22:39:44

我想再次感谢你，过去三天我一直在为这个解决方案而努力。 – vinesh 2014-09-26 22:44:12

这实在太杂乱无法理解。您应该考虑清理您动态呈现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'>

等....

如果您呈现所有回波串你的HTML，你会发现它非常难以对付以后。特别是，当您在处理大量渲染的应用程序时。

来源

2014-09-26 20:48:33

我同意你，但这个应用程序已在所有的PHP。我仍然在学习这些东西，并试图在学习的同时尽量定制它的UI。 – vinesh 2014-09-26 21:00:37

回答

相关问题