Переключить изображения с 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 для позиции.
• Для каждого элемента, который вам нужно переключить, вы можете использовать эту самодельную функцию 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>