Text anzeigen, wenn auf Bild klicken Text aus vorherigem Bild ausblenden Javascript

Ich habe einige Bilder und wenn ich auf einen von ihnen klicke, erscheint ein Text. Dann möchte ich beim Klicken auf einen anderen den aktuellen Text für das Bild zeigen. Aber wenn ich jetzt auf ein anderes Bild klicke, verschwindet der vorherige Text und muss noch einmal auf mein Bild klicken, um seinen Text anzuzeigen. Ist es sinnvoll? Mein Code ist:Text anzeigen, wenn auf Bild klicken Text aus vorherigem Bild ausblenden Javascript

function showHide(a) { 
 
    
 
    var div = document.getElementById("word"); 
 
    if (div.style.display == 'none') { 
 
     div.style.display = ''; 
 
\t $('#word').text(a); 
 
    } 
 
    else { 
 
    div.style.display = 'none'; 
 
    } 
 
}

<div class="2"> 
 
<span id="word" style="display:none"></span> 
 
</div> 
 

 
<div class="responsive"> 
 
    <div class="img"> 
 
     <center><h1>House</h1></center> 
 
     <audio id="sound9" src="audio/window.mp3" ></audio><a onclick="document.getElementById('sound9').play();showHide('Window');"><img src="house/window.jpeg" id="window" alt="window" width="220" height="160"></img></a> 
 
\t <span id="img9"></span> 
 
\t <audio id="sound10" src="audio/table.mp3" ></audio><a onclick="document.getElementById('sound10').play(); showHide('Table');"><img src="house/table.jpg" id="table" alt="table" width="220" height="160"></img></a> 
 
\t <span id="img10"></span> 
 
\t </br> 
 
\t <audio id="sound11" src="audio/roof.mp3" ></audio><a onclick="document.getElementById('sound11').play();showHide('Roof');"><img src="house/roof.jpg" id="roof" alt="roof" width="220" height="160"></img></a> 
 
\t <span id="img11"> </span> 
 
\t <audio id="sound12" src="audio/floor.mp3" ></audio><a onclick="document.getElementById('sound12').play();showHide('Floor'); "><img src="house/floor.jpg" id="floor" alt="floor" width="220" height="160"></img></a> 
 
\t <span id="img12"> </span> 
 
    </div> 
 
</div>

Quelle

2017-01-16 chi

Wie Sie Jquery verwenden, ist es voll nutzen. Problem ist nach dem ersten Klick Daten angezeigt werden und wenn Sie auf ein anderes Bild klicken, überprüft Ihre Funktion, ob die visibility is none, die false ist, und geht in else Fall und macht es versteckt und im nächsten Klick überprüft es erneut und diese Zeit geht in wenn Bedingung und zeigt den Text.

function showHide(a) { 
 
     var div = $('#word'); 
 
     div.text(a); 
 
     
 
     if (!$(div).is(":visible")) { 
 
      div.show(); 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="2"> 
 
<span id="word" style="display:none"></span> 
 
</div> 
 

 
<div class="responsive"> 
 
    <div class="img"> 
 
     <center><h1>House</h1></center> 
 
     <audio id="sound9" src="audio/window.mp3" ></audio><a onclick="document.getElementById('sound9').play();showHide('Window');"><img src="house/window.jpeg" id="window" alt="window" width="220" height="160"></img></a> 
 
\t <span id="img9"></span> 
 
\t <audio id="sound10" src="audio/table.mp3" ></audio><a onclick="document.getElementById('sound10').play(); showHide('Table');"><img src="house/table.jpg" id="table" alt="table" width="220" height="160"></img></a> 
 
\t <span id="img10"></span> 
 
\t </br> 
 
\t <audio id="sound11" src="audio/roof.mp3" ></audio><a onclick="document.getElementById('sound11').play();showHide('Roof');"><img src="house/roof.jpg" id="roof" alt="roof" width="220" height="160"></img></a> 
 
\t <span id="img11"> </span> 
 
\t <audio id="sound12" src="audio/floor.mp3" ></audio><a onclick="document.getElementById('sound12').play();showHide('Floor'); "><img src="house/floor.jpg" id="floor" alt="floor" width="220" height="160"></img></a> 
 
\t <span id="img12"> </span> 
 
    </div> 
 
</div> 
 
</body>

Quelle

2017-01-16 10:58:10 MGA

Text anzeigen, wenn auf Bild klicken Text aus vorherigem Bild ausblenden Javascript

Antwort

Verwandte Themen