Fatal编程技术网
  • javascript/
  • Javascript JS：基于另一个DIV内容隐藏DIV

Javascript JS：基于另一个DIV内容隐藏DIV

javascript css html

Javascript JS：基于另一个DIV内容隐藏DIV,javascript,css,html,hide,Javascript,Css,Html,Hide,我想根据另一个DIV的特定文本隐藏一些DIV。我的Javascript（下面）不起作用 HTML: <div id="LEGEND">abAB</div> <div id="small-a"></div> <div id="small-b"></div> <div id="big-a"></div> <div id="big-b"></div> <script

我想根据另一个DIV的特定文本隐藏一些DIV。我的Javascript（下面）不起作用

HTML:

<div id="LEGEND">abAB</div>

<div id="small-a"></div> 
<div id="small-b"></div> 
<div id="big-a"></div> 
<div id="big-b"></div> 

<script>
window.onload = function ShowHide{

    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('small-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("b") > 0){
        document.getElementById('small-b').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("A") > 0){
        document.getElementById('big-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('big-b').style.display = 'block';}    
</script>

abAB
如果图例DIV包含文本a，则我希望它仅显示DIV small-a。
如果图例DIV包含文本bA，那么我希望它只显示DIV small-b和big-a

Javascript:

<div id="LEGEND">abAB</div>

<div id="small-a"></div> 
<div id="small-b"></div> 
<div id="big-a"></div> 
<div id="big-b"></div> 

<script>
window.onload = function ShowHide{

    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('small-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("b") > 0){
        document.getElementById('small-b').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("A") > 0){
        document.getElementById('big-a').style.display = 'block';}
    if (document.getElementById('LEGEND').indexOf("a") > 0){
        document.getElementById('big-b').style.display = 'block';}    
</script>


window.onload=函数ShowHide{
if（document.getElementById（'LEGEND'）.indexOf（“a”）>0）{
document.getElementById（'small-a'）.style.display='block'；}
if（document.getElementById（'LEGEND'）.indexOf（“b”）>0）{
document.getElementById（'small-b'）。style.display='block'；}
if（document.getElementById（'LEGEND'）.indexOf（“A”）>0）{
document.getElementById（'big-a'）.style.display='block'；}
if（document.getElementById（'LEGEND'）.indexOf（“a”）>0）{
document.getElementById（'big-b'）.style.display='block'；}
您需要设置
样式。display
属性设置为
none
您需要设置
样式。display
属性设置为
none
您忘记了一些事情

  • 函数声明应该是这样的

    函数函数名（args）{
}

  • 必须使用style.display=“无”隐藏div

例如：

<div id="LEGEND">abB</div>

<div id="small-a" style="display: none;">This is small-a</div> 
<div id="small-b" style="display: none;">This is small-b</div> 
<div id="big-a" style="display: none;">This is big-a</div> 
<div id="big-b" style="display: none;">This is big-b</div>

<script>
function showElement(id) {
    document.getElementById(id).style.display = "block";
}

window.onload = function ShowHide() {
    var legend = document.getElementById("LEGEND").innerHTML;

    if(legend.indexOf("a") != -1) showElement("small-a");
    if(legend.indexOf("b") != -1) showElement("small-b");
    if(legend.indexOf("A") != -1) showElement("big-a");
    if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>

abB
这是小a
这是小b
这是个大问题
这是大b
函数showElement（id）{
document.getElementById（id）.style.display=“block”；
}
window.onload=函数ShowHide（）{
var legend=document.getElementById（“legend”）.innerHTML；
如果（图例索引（“a”）！=-1）showElement（“小a”）；
如果（图例索引（“b”）！=-1）showElement（“小b”）；
如果（图例索引（“A”）！=-1）showElement（“大A”）；
如果（图例索引（“B”）！=-1）showElement（“大B”）；
}
您忘记了几件事

  • 函数声明应该是这样的

    函数函数名（args）{
}

  • 必须使用style.display=“无”隐藏div

例如：

<div id="LEGEND">abB</div>

<div id="small-a" style="display: none;">This is small-a</div> 
<div id="small-b" style="display: none;">This is small-b</div> 
<div id="big-a" style="display: none;">This is big-a</div> 
<div id="big-b" style="display: none;">This is big-b</div>

<script>
function showElement(id) {
    document.getElementById(id).style.display = "block";
}

window.onload = function ShowHide() {
    var legend = document.getElementById("LEGEND").innerHTML;

    if(legend.indexOf("a") != -1) showElement("small-a");
    if(legend.indexOf("b") != -1) showElement("small-b");
    if(legend.indexOf("A") != -1) showElement("big-a");
    if(legend.indexOf("B") != -1) showElement("big-b");
}
</script>

abB
这是小a
这是小b
这是个大问题
这是大b
函数showElement（id）{
document.getElementById（id）.style.display=“block”；
}
window.onload=函数ShowHide（）{
var legend=document.getElementById（“legend”）.innerHTML；
如果（图例索引（“a”）！=-1）showElement（“小a”）；
如果（图例索引（“b”）！=-1）showElement（“小b”）；
如果（图例索引（“A”）！=-1）showElement（“大A”）；
如果（图例索引（“B”）！=-1）showElement（“大B”）；
}
首先，尝试确保调用window.onload：

window.addEventListener('load', ShowHide, false);

function ShowHide()
{...
其次，您应该查看元素的InnerHTML：

if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
第三，每个if语句还应该包含一个else（用真实的div名称替换divName）：

希望有帮助

~md5sum~

编辑：

另外，我不是100%确定，但我相信语法：

window.onload=函数ShowHide{

将完全失败。我认为语法应该是：

window.onload=function（）{

首先，尝试确保调用window.onload：

window.addEventListener('load', ShowHide, false);

function ShowHide()
{...
其次，您应该查看元素的InnerHTML：

if (document.getElementById('LEGEND').innerHTML.match("a") == "a"){...
第三，每个if语句还应该包含一个else（用真实的div名称替换divName）：

希望有帮助

~md5sum~

编辑：

另外，我不是100%确定，但我相信语法：

window.onload=函数ShowHide{

将完全失败。我认为语法应该是：

window.onload=function（）

请尝试以下方法：


<div id="LEGEND">abAB</div>       

<div id="small-a" style="display: none;"></div>        
<div id="small-b" style="display: none;"></div>        
<div id="big-a" style="display: none;"></div>        
<div id="big-b" style="display: none;"></div>

<script type="text/javascript">
  window.onload = function() {
    if (document.getElementById('LEGEND').indexOf('a') > 0) {
      document.getElementById('small-a').style.display = 'block';
      ...
      // etc.
    }
  }
</script>



abAB
window.onload=函数（）{
if（document.getElementById（'LEGEND'）.indexOf（'a'）>0）{
document.getElementById（'small-a'）.style.display='block'；
...
//等等。
}
}

问题在于，当
div
已经是块级元素时，您的代码将其他
div
元素更改为块级元素。您需要将它们设置为最初不使用CSS显示，然后在JavaScript中显示它们

请尝试以下方法：


<div id="LEGEND">abAB</div>       

<div id="small-a" style="display: none;"></div>        
<div id="small-b" style="display: none;"></div>        
<div id="big-a" style="display: none;"></div>        
<div id="big-b" style="display: none;"></div>

<script type="text/javascript">
  window.onload = function() {
    if (document.getElementById('LEGEND').indexOf('a') > 0) {
      document.getElementById('small-a').style.display = 'block';
      ...
      // etc.
    }
  }
</script>



abAB
window.onload=函数（）{
if（document.getElementById（'LEGEND'）.indexOf（'a'）>0）{
document.getElementById（'small-a'）.style.display='block'；
...
//等等。
}
}

如果是我，我会这样做。你不需要触摸HTML部分，一切都是用javascript完成的

您可以将其扩展到CDEFGH

您也不需要为每个标记设置
。：-）



window.onload=function（）{
x=document.getElementsByTagName（“div”）；
//首先用小的或大的隐藏所有东西-
对于（x中的i）
if（/small-| big-/.test（x[i].id））
x[i].style.display=“无”；
//然后根据图例启用每个标记
x=document.getElementById（“图例”）.innerHTML；

对于（i=0；i如果是我，我会这样做。你不需要触摸HTML部分，一切都是用javascript完成的

您可以将其扩展到CDEFGH

您也不需要为每个标记设置
。：-）



window.onload=function（）{
x=document.getElementsByTagName（“div”）；
//首先用小的或大的隐藏所有东西-
对于（x中的i）
if（/small-| big-/.test（x[i].id））
x[i].style.display=“无”；
//然后根据图例启用每个标记
x=document.getElementById（“图例”）.innerHTML；

对于（i=0；i）您当前得到的结果是什么？您当前得到的结果是什么？这非常有效！谢谢