使用 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() {&nbsp; $('#NWest').on('click', function() {&nbsp; &nbsp; toggleImageVisible('MyImageA');&nbsp; });&nbsp; $('#NEast').on('click', function() {&nbsp; &nbsp; toggleImageVisible('MyImageB');&nbsp; });});function toggleImageVisible(id) {&nbsp; &nbsp; var img = document.getElementById(id);&nbsp; &nbsp; img.style.visibility = (img.style.visibility === 'visible' ? 'hidden': 'visible');}.container {&nbsp; position: relative;&nbsp; top: 0%;&nbsp; left: 0%;&nbsp; color: white;&nbsp; font-size: 20px;&nbsp; top: 30px;}.text {&nbsp; max-width: 20ch;&nbsp; position: absolute;&nbsp; top: 150px;&nbsp; left: 245px;&nbsp; transform: translate(-50%, -50%);}img {&nbsp; filter: grayscale(100%);}.MyImageClassA{&nbsp; top: 0px;&nbsp; left: 0px;&nbsp; position: absolute;&nbsp; visibility: hidden;}.MyImageClassB{&nbsp; top: 0px;&nbsp; left: 75%;&nbsp; position: absolute;&nbsp; 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">&nbsp; <img id="MyImageA" class="MyImageClassA" src="MyImage.jpg" alt="MyImage" style="width:25%" ;>&nbsp; <img id="MyImageB" class="MyImageClassB" src="MyImage.jpg" alt="MyImage" style="width:25%" ;>&nbsp; <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.&nbsp; </div></div><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>