[英]How to show/hide images using javascript objects
I have a html page showing pictures of different countries and 5 li elements with ids that represent 4 countries, the 5th li tag make all images to show. 我有一个html页面,显示不同国家的图片和5个li元素,其id代表4个国家,第5个li标签可显示所有图像。 By clicking on one li tag (it represent curtain country) only the pictures of that country remains and the others disappear.
通过单击一个li标签(代表窗帘国家),仅保留该国家的照片,而其他照片则消失。 But what i have to do is to make my javascript code with objects.
但是我要做的是用对象制作我的javascript代码。 I am extremely new to JS and I have no clue how to do it :(
我是JS的新手,我不知道该怎么做:(
Here is my JS code: 这是我的JS代码:
(function() {
document.getElementById('all').addEventListener('click', showAll);
document.getElementById('italy').addEventListener('click', showItaly);
document.getElementById('france').addEventListener('click', showFrance);
document.getElementById('croatia').addEventListener('click', showCroatia);
document.getElementById('montenegro').addEventListener('click', showMontenegro);
var italyCities = document.getElementsByClassName('italyCities');
var franceCities = document.getElementsByClassName('franceCities');
var croatiaCities = document.getElementsByClassName('croatiaCities');
var montenegroCities = document.getElementsByClassName('montenegroCities');
// onclick show all cities
function showAll() {
for (let i = 0; i < italyCities.length; i++) {
italyCities[i].style.display = 'inline-block';
franceCities[i].style.display = 'inline-block';
croatiaCities[i].style.display = 'inline-block';
montenegroCities[i].style.display = 'inline-block';
}
}
// onclick show only italian cities
function showItaly() {
for (let i = 0; i < italyCities.length; i++) {
franceCities[i].style.display = 'none';
croatiaCities[i].style.display = 'none';
montenegroCities[i].style.display = 'none';
italyCities[i].style.display = 'inline-block';
}
}
// onclick show only french cities
function showFrance() {
for (let i = 0; i < franceCities.length; i++) {
italyCities[i].style.display = 'none';
croatiaCities[i].style.display = 'none';
montenegroCities[i].style.display = 'none';
franceCities[i].style.display = 'inline-block';
}
}
// onclick show only croatian cities
function showCroatia() {
for (let i = 0; i < croatiaCities.length; i++) {
italyCities[i].style.display = 'none';
franceCities[i].style.display = 'none';
montenegroCities[i].style.display = 'none';
croatiaCities[i].style.display = 'inline-block';
}
}
// onclick show only montenegro cities
function showMontenegro() {
for (let i = 0; i < montenegroCities.length; i++) {
italyCities[i].style.display = 'none';
franceCities[i].style.display = 'none';
croatiaCities[i].style.display = 'none';
montenegroCities[i].style.display = 'inline-block';
}
}
})();
I think you're over-complicating things for yourself. 我认为您为自己做的事情过于繁琐。 Instead of having a function for each place that just changes the inline-style of the one you want to show and hides the rest you could do this all with one function...
不必为每个位置都具有仅更改要显示的位置的内联样式并隐藏其余部分的功能,而可以使用一个功能来完成所有操作……
If you were to use a general class for all of the cities, say .city you could toggle a hide/show class across all of them at once. 如果要对所有城市使用通用类别,例如说.city ,则可以一次在所有城市之间切换隐藏/显示类别。
CSS 的CSS
.hide {
display:none;
}
.show {
display:block;
}
JS JS
$(document).ready(function() {
$(".city").addClass('hide');
$("li:first-child").click(function() {
$(".city").removeClass('show');
$(".city:nth-child(2)").addClass('show');
});
$("li:nth-child(2)").click(function() {
$(".city").removeClass('show');
$(".city:nth-child(3)").addClass('show');
});
$("li:nth-child(3)").click(function() {
$(".city").removeClass('show');
$(".city:nth-child(4)").addClass('show');
});
$("li:last-child").click(function() {
$(".city").addClass('show');
});
});
Update 更新资料
For anyone who comes across this and isn't planning on using objects - here is a fiddle showing the principle of the question working. 对于遇到这种情况且不打算使用对象的任何人-这是一个小提琴,显示了问题起作用的原理。
https://jsfiddle.net/shzq8fd5/10/ https://jsfiddle.net/shzq8fd5/10/
Original Code Answer 原始码答案
CSS 的CSS
.show {
display:block;
}
.hide {
display:none;
}
Individual City Function: 个别城市功能:
$(document).ready(function() {
$(".city").addClass('hide');
$(".city").click(function() {
$(".city").removeClass('show');
$(this).addClass('show');
});
});
Show all City Function 显示所有城市功能
$(document).ready(function() {
$(".city").click(function() {
$(".city").addClass('show');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.