我正在开发一个项目，按下按钮时图像会移动到屏幕的每个角落。我需要将这些图像从隐藏切换到显示。
为此，我正在使用，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%);
}
炎炎设计
相关分类