Показать текст при нажатии на изображение Скрыть текст из ранее изображения javascript

У меня есть несколько изображений, и когда я нажимаю на один из них появляется текст. Затем я хочу при нажатии на другой, чтобы показать мне текущий текст для этого изображения.Но теперь, когда нажмите на другое изображение, ранее текст исчезнет и придется нажать еще раз на моем изображении, чтобы отобразить его текст.В этом есть смысл?
Мой код:

  function showHide(a) {
   
   var div = document.getElementById("word");
   if (div.style.display == 'none') {
      div.style.display = '';
	  $('#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>
	  <span id="img9"></span>
	  <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>
	  <span id="img10"></span>
	  </br>
	  <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>
	  <span id="img11"> </span>
	  <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>
	  <span id="img12"> </span>
  </div>
</div>

1 ответ

  1. При использовании Jquery используйте его полностью. Проблема в том, что после первого клика отображаются данные, и когда вы нажимаете на другое изображение , ваша функция проверяет , Еслиvisibility is none, который естьfalse, и идет в elseслучае, и делает его скрытым, и в следующем щелчке он проверяет снова, и на этот раз входит, если условие и показывает текст.

    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>
    	  <span id="img9"></span>
    	  <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>
    	  <span id="img10"></span>
    	  </br>
    	  <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>
    	  <span id="img11"> </span>
    	  <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>
    	  <span id="img12"> </span>
      </div>
    </div>
    </body>