I'm trying to create a photo-view display similar to pintrest except there is a preference checkbox where you can choose the types of images you see.
(我正在尝试创建类似于pintrest的照片视图显示，除了有一个首选项checkbox ，您可以在其中选择所看到图像的类型。)
The problem I'm having is that some of these images fall under multiple catergories, for example there might be a driving shot in the city, so I want that particular image to show if either the city checkbox or drivng images checkbox is clicked.
(我遇到的问题是这些图像中的某些图像属于多个类别，例如，在城市中可能会有开车的场景，因此我希望该特定图像显示是否单击“城市” checkbox或“驱动图像” checkbox 。)
Currently I have it so say for example, City checkbox is clicked and becomes unchecked , then all images with the city class get a class of displayNone which does the obvious.
(目前，我可以这样说，例如，单击City checkbox ，然后unchecked ，然后所有具有city class图像都会获得displayNone类，这很明显。)
But I want to make it so if it also has another class that is currently checked then it doesnt get the class of displayNone, only when all the classes of that particular image are unchecked is when that image gets the class of displayNone.(但是我要这样做，以便如果它还具有当前checked另一个class ，则它不会获得displayNone的class ，只有当unchecked该特定图像的所有类时，才是该图像获得displayNone的class 。)
I know that the switch statement would be ideal for this scenario but I can't seem to figure out exactly how I'd implement it.
(我知道switch语句对于这种情况将是理想的，但是我似乎无法确切地知道如何实现它。)
HTML
<!--PREFERENCE CHECKBOX-->
<div class = "preferanceCheckbox">
<form class ="formBox">
<div>
<input type="checkbox" class = "cBDrivingShot">
Driving Shots <br>
</div>
<input type="checkbox" class = "cBCyberPunkShot">
Cyberpunk <br>
<input type="checkbox" class = "cBcityRelated">
city related <br>
</form>
</div>
<div class ="photoSectionAlignment pintrestView imgZ displayNone">
<!-- CYBERPUNK SHOTS -->
<img src="cyberPunkOne.jpg" class = "pImgCyberPunk pImgDrivingShot displayNone">
<img src="cyberPunkTwo.jpg" class = "pImgCyberPunk pImgCity displayNone">
<img src="cyberPunkTwo.jpg" class = "pImgCyberPunk pImgtext displayNone">
<!-- DRIVING SHOTS -->
<img src="drivingShotOne" class = "pImgDrivingShot pImgCity displayNone">
<img src="drivingShotTwo" class = "pImgDrivingShot pImgCity displayNone">
<img src="drivingShotThree" class = "pImgDrivingShot pImgCyberPunk displayNone">
<!-- CITY SHOTS -->
<img src="cityShotOne" class = "pImg pImgCity displayNone">
</div>
CSS
img {
width: 200px;
}
.displayNone {
display: none;
}
JAVASCRIPT
//GLOBAL VARIABLES
//....................................................................
var pintrestView = document.querySelector(".pintrestView");
var dnPintrest = pintrestView.classList.contains("displayNone");
// GLOBAL PREFERANCES CODE
//..................................................................
var drivingCheckBox = document.querySelector(".cBDrivingShot");
var cyberPunkCheckBox = document.querySelector(".cBCyberPunkShot");
var cityCheckBox = document.querySelector(".cBcityRelated");
//PREFERANCES CODE
//..................................................................
// pintrest class variables
var pImgDrivingShot = document.querySelectorAll(".pImgDrivingShot");
var pImgCyberPunk = document.querySelectorAll(".pImgCyberPunk");
var pImgCity = document.querySelectorAll(".pImgCity");
//DRIVING SHOT FUNCTIONALITY
drivingCheckBox.addEventListener("click",drivingShotImgFunctionPintrest);
function drivingShotImgFunctionPintrest(){
if (drivingCheckBox.checked === true){
for (var i = 0; i < pImgDrivingShot.length; i++){
if (pImgDrivingShot[i].classList.contains("displayNone")) {
pImgDrivingShot[i].classList.remove("displayNone");
}
}
}else{
if (drivingCheckBox.checked === false) {
for (var i = 0; i < pImgDrivingShot.length; i++){
if (pImgDrivingShot[i].classList.contains("displayNone") === false) {
pImgDrivingShot[i].classList.add("displayNone");
}
}
}
}
}
//CYBERPUNK FUNCTIONALITY
cyberPunkCheckBox.addEventListener("click",cyberPunkImgFunctionPintrest);
function cyberPunkImgFunctionPintrest(){
if (cyberPunkCheckBox.checked === true){
for (var i = 0; i < pImgCyberPunk.length; i++){
if (pImgCyberPunk[i].classList.contains("displayNone")) {
pImgCyberPunk[i].classList.remove("displayNone");
}
}
}else{
if (cyberPunkCheckBox.checked === false) {
for (var i = 0; i < pImgCyberPunk.length; i++){
if (pImgCyberPunk[i].classList.contains("displayNone") === false) {
pImgCyberPunk[i].classList.add("displayNone");
}
}
}
}
}
//CITY FUNCTIONALITY
cityCheckBox.addEventListener("click",cityImgFunctionPintrest);
function cityImgFunctionPintrest(){
if (cityCheckBox.checked === true){
for (var i = 0; i < pImgCity.length; i++){
if (pImgCity[i].classList.contains("displayNone")) {
pImgCity[i].classList.remove("displayNone");
}
}
}else{
if (cityCheckBox.checked === false) {
for (var i = 0; i < pImgCity.length; i++){
if (pImgCity[i].classList.contains("displayNone") === false) {
pImgCity[i].classList.add("displayNone");
}
}
}
}
}
ask by Josh McIntosh translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
