使用 jquery 切换图像

Question

我正在开发一个项目，按下按钮时图像会移动到屏幕的每个角落。我需要将这些图像从隐藏切换到显示。为此，我正在使用，toggle()但问题是我需要显示的内容一直显示，直到关闭为止。目前，当我单击一个时，它会显示，但如果我单击另一个，则先前显示的将消失，而我单击的将显示；一次只会显示一张图像。任何的意见都将会有帮助。$(document).ready(function() {  var img = $('#MyImage');  $('#NWest').on('click', function() {    img.css({      top: '0px',      left: '0px',      position: 'absolute'    });    $("img").toggle();  });});$(document).ready(function() {  var text = $('#MyText');  $('#NWest').on('click', function() {    text.css({      top: '150px',      left: '245px',      position: 'absolute'    });  });});$(document).ready(function() {  var img = $('#MyImage');  $('#NEast').on('click', function() {    img.css({      top: '0px',      left: '75%',      position: 'absolute'    });    $("img").toggle();  });});$(document).ready(function() {  var text = $('#MyText');  $('#NEast').on('click', function() {    text.css({      top: '150px',      left: '88%',      position: 'absolute'    });  });});$(document).ready(function() {  var img = $('#MyImage');  $('#SEast').on('click', function() {    img.css({      top: '560px',      left: '75%',      position: 'absolute'    });    $("img").toggle();  });});$(document).ready(function() {  var text = $('#MyText');  $('#SEast').on('click', function() {    text.css({      top: '710px',      left: '88%',      position: 'absolute'    });  });});$(document).ready(function() {  var img = $('#MyImage');  $('#SWest').on('click', function() {    img.css({      top: '560px',      left: '0px',      position: 'absolute'    });    $("img").toggle();  });});$(document).ready(function() {  var text = $('#MyText');  $('#SWest').on('click', function() {    text.css({      top: '710px',      left: '245px',      position: 'absolute'    });  });});.container {  position: relative;  top: 0%;  left: 0%;  color: white;  font-size: 20px;  top: 30px;}.text {  max-width: 20ch;  position: absolute;  top: 150px;  left: 245px;  transform: translate(-50%, -50%);}

Answer 1

您需要根据可见性风格采取行动。

• 将 4 个图像放入 HTML 中。

• 在 CSS 中为他们指定该职位的类别。

• 对于每个元素，您需要切换，您可以使用这个自制函数toggleImageVisible()。

以下代码片段适用于 2 个按钮：

$(document).ready(function() {

  $('#NWest').on('click', function() {

    toggleImageVisible('MyImageA');

  });

  $('#NEast').on('click', function() {

    toggleImageVisible('MyImageB');

  });

});

function toggleImageVisible(id) {

    var img = document.getElementById(id);

    img.style.visibility = (img.style.visibility === 'visible' ? 'hidden': 'visible');

}

.container {

  position: relative;

  top: 0%;

  left: 0%;

  color: white;

  font-size: 20px;

  top: 30px;

}

.text {

  max-width: 20ch;

  position: absolute;

  top: 150px;

  left: 245px;

  transform: translate(-50%, -50%);

}

img {

  filter: grayscale(100%);

}

.MyImageClassA{

  top: 0px;

  left: 0px;

  position: absolute;

  visibility: hidden;

}

.MyImageClassB{

  top: 0px;

  left: 75%;

  position: absolute;

  visibility: hidden;

}

<input type="button" value="North West" id="NWest">

<input type="button" value="North East" id="NEast">

<input type="button" value="South East" id="SEast">

<input type="button" value="South West" id="SWest">

<a href='http://cis337-0217.cisdprogram.com/Index.html'>Return to Index</a><br>

<div class="container">

  <img id="MyImageA" class="MyImageClassA" src="MyImage.jpg" alt="MyImage" style="width:25%" ;>

  <img id="MyImageB" class="MyImageClassB" src="MyImage.jpg" alt="MyImage" style="width:25%" ;>

  <div class="text" id="MyText"> Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text. Lines of text.

  </div>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>