Question

我有一些图像，当我点击其中一个图像时，会出现一个文字。然后我想在点击另一个时向我显示该图像的当前文本。但是现在当点击另一个图像时，之前的文本消失，并且必须再次单击我的图像以显示其文本。这有什么意义吗？我的代码是：

  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>

Answer 1

使用Jquery时，请完全使用它。问题是在显示第一次点击数据后，当您点击另一个图像时，您的功能会检查visibility is none是false，并且进入else情况并将其隐藏在然后再点击它再次检查，这次是if条件并显示文本。

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击图像时显示文本隐藏以前图像javascript中的文本

1 个答案: