Jquery：トリガーで画像を表示し、画像をクリックします

Question

現在、トグルdiv機能を使用しています。私はトグルするためのトリガーポイントになるように画像を使用しています。例えば、divが閉じている場合、divを圧縮するために、拡大するユーザーを示す「プラス」記号が付いた画像が表示され、逆も同様です。唯一の問題は、divを圧縮して圧縮するために2セットの画像を使用していますが、私は動作するように設定できますが、両方は使用できないということです。私はjsfiddleでよく仕事をdoesntのしているが、あなたはここにあり、それを見たい場合は、リンクされた例である。http://jsfiddle.net/sQnd9/4/

ここでは、私の例である：

<script type="text/javascript"> 
function toggle1(showHideDiv, switchImgTag) { 
     var ele = document.getElementById(showHideDiv); 
     var imageEle = document.getElementById(switchImgTag); 
     if(ele.style.display == "block") { 
       ele.style.display = "none"; 
     imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>'; 

     } 
     else { 
       ele.style.display = "block"; 
       imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>'; 

     } 
} 
</script> 

<script type="text/javascript"> 

function toggle2(showHideDiv2, switchImgTag2) { 
     var ele = document.getElementById(showHideDiv2); 
     var imageEle = document.getElementById(switchImgTag2); 
     if(ele.style.display == "block") { 
       ele.style.display = "none"; 
     imageEle.innerHTML = '<img src=images/arrow_open.png/>'; 
     } 
     else { 
       ele.style.display = "block"; 
       imageEle.innerHTML = '<img src=images/arrow_close.png/>'; 
     } 
} 
</script> 


<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div> 
<br /> 
     <div id="contentDivImg" style="display:none;"> 
     Example1-Content 
     </div> 


<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div> 
<br /> 
     <div id="contentDivImg2" style="display:none;"> 
     Example2-Content 
     </div> 

Answer 1

あなたはIMGに引用符が欠落しています第二の機能が呼び出されることは決してありませんので、あなたはまた、いずれの例の最初の関数を参照している二番目の

のsrc属性は...変更してみてください：

<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div> 

〜

<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div> 

また、あなたのimgタグにセミコロンがある理由はわかりませんが、そこにはいけません。

Answer 2

問題はあなたのコード（@appclayが指摘している間違いを除く）ではありません。問題はjsfiddleです。それが生成するソースコードを見てください。何かを "javascript"セクションに置くと、それはそれ自身の名前空間になり、そのブロックの外にある関数名へのアクセスが妨げられます（例えばtoggle1への呼び出しは未定義の関数エラーを投げていました）。

実際には、これらの機能を直接window.のプロパティとして定義することでこれを確認できます。その後、あなたのコードは期待どおりに動作します。 http://jsfiddle.net/sQnd9/7/

あなた自身のコードでは、これらの関数名を独自のスコープにカプセル化せず、期待どおりに機能するでしょう（ただし、@appclayを変更する必要があります）。

また、とにかくこのようにしないでください。 javascriptブロックにイベントハンドラをアタッチする必要があります。