javascript - 显示/隐藏文本区域框+在图像之间交换onclick

Question

我正在创建表单页面，我想在单击图像时隐藏文本区域框以及交换图像，反之亦然。现在我可以隐藏/显示 div，但当隐藏文本区域框时不会显示图像，并且也不会返回到第一个图像。有 2 个脚本，一个用于 div 显示/隐藏，另一个用于交换图像。

1. image: output before click
2. image: after hitting on an image

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    <script>
    	function showhide(id){ 
    		if (document.getElementById){ 
    			obj = document.getElementById(id); 
    			if (obj.style.display == "none"){ 
    				obj.style.display = ""; 
    			} else { 
    				obj.style.display = "none"; 
    			} 
    		} 
    	} 
    var onImg= "testim.png, valm.png";
    var offImg= "testip.png, valp.png";
    </script></code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div style="margin-top: 10px; text-align: center;">
    <ul id="text_type_tab" name="text_type_tab">
        <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
    </ul>
    </div>

    <table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
    <tr>
        <td colspan="2">
            <textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
        </td>
    </tr>
    </table></code></pre>
</div>
</div>



Please help.
Thanks a lot, in advance!



  [1]: /image/7PwdK.png
  [2]: /image/5j6FE.png

Answer 1

指针 1

将以下变量更改为图像的绝对链接

var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link

(只是为了测试测试安全)

示例

 var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
 var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";

<小时/> 指针2

改变

 <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li></a>
    </ul>

到此

 <li id="PR_TEXT_TAB" class="tab_active"> <a href="javascript:showhide('textInputField1');"><img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
    </ul>

那就应该是</a></li>而不是</li></a>

<小时/>

指针3

改变这个

<a href="javascript:showhide('textInputField1');">

到此

<a href="#" onclick="javascript:showhide('textInputField1')">

将其直接附加到 onclick 事件，因为 href 属性仅指向一个位置。

这是一个片段

-    <script>
    	function showhide(id){ 
    		if (document.getElementById){ 
    			obj = document.getElementById(id); 
          obj.style.display == "none"?obj.style.display = "":obj.style.display = "none"; 
          
    		//	if (obj.style.display == "none"){ 
    		//		obj.style.display = "":; 
    		//	} 
          //else { 
    			//	obj.style.display = "none"; 
    			//} 
    		} 
    	} 
    var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
    var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
    </script>


    <div style="margin-top: 10px; text-align: center;">
    <ul id="text_type_tab" name="text_type_tab">
        <li id="PR_TEXT_TAB" class="tab_active"> <a href="#" onclick="javascript:showhide('textInputField1')"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></a></li>
    </ul>
    </div>

    <table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
    <tr>
        <td colspan="2">
            <textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
        </td>
    </tr>
    </table>