使用 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%);
}

img {
  filter: grayscale(100%);
}

<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="MyImage" 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>

Answer 1

您需要根据可见性样式采取行动。

将 4 张图片放入 HTML。
在你的 CSS 中给他们一个 class 作为职位。
对于每个元素，都需要切换，可以使用这个自制函数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>

使用 jquery 切换图像

Toggle images with jquery

html

javascript

jquery

toggle