我正在開發一個項目，按下按鈕時圖像會移動到屏幕的每個角落。我需要將這些圖像從隱藏切換到顯示。為此，我正在使用，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%);}
1 回答
炎炎設計
TA貢獻1808條經驗 獲得超4個贊
您需要根據可見性風格采取行動。
將 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>
- 1 回答
- 0 關注
- 101 瀏覽
添加回答
舉報
0/150
提交
取消