Question

我开始使用HTML，CSS和Javascript进行编码，我遇到了问题。我有一个Blogger，我的帖子通常有很多内容，所以我想通过“分类”来分割我的帖子并使用像Spoiler这样的东西。所以，我正在使用一些 div 标签，如上所述

<div style="background-color:rgb(0, 0, 0);">
    <p style="font-family:Segoe UI Light; color:white; vertical-align:middle; font-size:16px;">
        <img id="icon_1" src="show.png"
        style="width:20px; height:20px; margin:2px; vertical-align:middle;">Example</img>
    </p>
</div>
<div id="cont_1" style="display: none;">
  <p>just some stuff for an example<br/>
  content will be placed on this div</p>
  <p>I have set a default ID string, but don't know If I will need it at all</p>
</div>

如您所见，我有一个主div ，其中包含一张图片（与show / hide相关的图标）和一个字符串输入。然后，我有另一个div类，其中将放置内容。我已设置和ID，在此示例中为 cont_1 。另外，在加载时，此div将折叠/隐藏，因此我设置 display：none; 。您还可以看到 img标记的ID icon_1 接下来，我构建了一个JavaScript类。在那里，我将 cont_1 样式显示设置为阻止; ，我还想更改图像 src

这是我的脚本代码

<script>
            function click1(item, ico)
            {
                var a = document.getElementById(item);
                if ( a.style.display == 'block' ) {
					a.style.display = 'none';
						icon_change(ico, "hide")
				}
                        
                    else {
						a.style.display = 'block';		
                		icon_change(ico, "show")
					}
                        
            }
			
			function icon_change(ico, visibility)
            {
                var image = document.getElementById(icon);
				var s = visibility;
                if ( s == "hide" ) {
				
                        image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC";
                   } 
				   
				   else {
				   		image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII=";
				   }
						
                
            }
			
</script>

是的..我的代码不是很有条理，可能我只需要一个功能来完成任务，我已经尝试过了，但是也没有用过...... 我的问题是将ID转换为JavaScript函数，这必须是我的代码上的问题。我想有一个或两个javascript函数来处理多个div，包含内容的div 并将显示和隐藏。我正在使用 OnClick 就像这样

<div Onclick="click1(content_1, icon_1)"/>

所以，我尝试将两个参数设置为JavaScript，一个是 div ID ，另一个是图片ID 我将它作为字符串插入，我应该这样做吗？你知道更简单的方法吗？我想看看是否有更容易的选择：）

谢谢！这是我的帖子，希望它足够清楚..

Answer 1

我猜你遇到的问题是你的参数不是作为字符串调用的。它应该是：

<div Onclick="click1('content_1', 'icon_1')"/>

您可以这样简化：

function click1(which_div)
            {
                var a = document.getElementById("content_"+which_div);
                var image = document.getElementById("icon_"+which_div);

                if ( a.style.display == 'block' ) {
                    a.style.display = 'none';
                    image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC";

                }

                    else {
                        a.style.display = 'block';      
                        image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII=";

                    }

            }

你这样称呼它：

<div Onclick="click1('1')"/>

Answer 2

我创建了以下代码片段，它提供了您所期望的相同功能/行为，但实现方式略有不同。

希望这能解决您的问题。您可以在JSFiddle上测试/播放此内容。

<figure onclick="showHide('show');" id="show">
    <img src="http://bioinformatica.upf.edu/2009/projectes09/Ex/resultats/seli/SelI_human_pfam_files/showButton.png" alt="An awesome picture">  
    <figcaption>Show</figcaption>
</figure>

<figure onclick="showHide('hide');" id="hide" style="display:none;">
    <img src="http://tweetingmeeting.com/images/hide-button.png">   
    <figcaption>Hide</figcaption>
</figure>


<div id="cont_1" style="display:none;">
    <p>just some stuff for an example<br/>
        content will be placed on this div</p>
    <p>some more content.....</p>
</div>


<script>
function showHide(activity)
{
    show = document.getElementById("show");
    hide = document.getElementById("hide");
    content = document.getElementById("cont_1");

    // a.style.display = "none";
    if(activity == "show")
    {
        show.style.display = "none";
        hide.style.display = "block";
        content.style.display = "block";
    }
    else if(activity == "hide")
    {
        show.style.display = "block";
        hide.style.display = "none";
        content.style.display = "none";
    }
}
</script>

将对象字符串ID设置为Javascript参数

2 个答案: