J'essaie de créer un affichage photo similaire à pintrest, sauf qu'il y a une case à cocher dans laquelle vous pouvez choisir les types d'images que vous voyez.
Le problème que je rencontre est-ce que certaines de ces images relèvent de plusieurs catégories, par exemple il peut y avoir une photo de conduite dans la ville, donc je veux que cette image particulière soit affichée si la case à cocher de la ville ou des images de conduite est cliqué.
Actuellement, je l'ai, disons par exemple, que la case à cocher de la ville est cliquée et devient décochée , puis toutes les images avec le city class obtenir une classe de displayNone qui fait l'évidence. Mais je veux faire en sorte que s'il a également une autre classe qui est actuellement cochée , alors il n'obtient pas la classe de displayNone, seulement quand tout les classes de cette image particulière sont décochées lorsque cette image obtient la classe de displayNone.
Je sais que l'instruction switch serait idéale pour cela scénario mais je n'arrive pas à comprendre exactement comment je le mettrais en œuvre.
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");
}
}
}
}
}
3 Réponses :
Le tout premier événement de modification utilisé au lieu de cliquer pour la case à cocher.
JS
<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">
<!-- 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>
HTML: supprimer display none pour votre div parent
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("change", drivingShotImgFunctionPintrest);
function drivingShotImgFunctionPintrest() {
for (var i = 0; i < pImgDrivingShot.length; i++) {
if (this.checked) {
pImgDrivingShot[i].classList.remove('displayNone')
} else {
pImgDrivingShot[i].classList.add('displayNone');
}
}
}
//CYBERPUNK FUNCTIONALITY
cyberPunkCheckBox.addEventListener("change", cyberPunkImgFunctionPintrest);
function cyberPunkImgFunctionPintrest() {
for (var i = 0; i < pImgCyberPunk.length; i++) {
if (this.checked) {
pImgCyberPunk[i].classList.remove("displayNone")
} else {
pImgCyberPunk[i].classList.add("displayNone");
}
}
}
//CITY FUNCTIONALITY
cityCheckBox.addEventListener("change", cityImgFunctionPintrest);
function cityImgFunctionPintrest() {
for (var i = 0; i < pImgCity.length; i++) {
if (!this.checked) {
pImgCity[i].classList.remove("displayNone");
} else {
pImgCity[i].classList.add("displayNone");
}
}
}
Voici une autre prise utilisant des règles CSS et un seul écouteur d'événement:
<input id="summer" type="checkbox" value=".pImgSummer">
<label for="summer">Summer Related</label>
const selected = {};
document.querySelector("form").addEventListener("click",(e)=>{
if ( e.target.type === "checkbox" ){
const cssClass = e.target.value;
if (e.target.checked){
selected[cssClass] = true;
} else {
delete selected[cssClass];
};
const cssRules = `${Object.keys(selected).join(",")}{ display: block !important; }`;
document.querySelector("style#preferences").textContent = cssRules;
}
});
.displayNone {
display: none;
}
Le code est beaucoup plus facile à étendre : il vous suffit d'ajouter une paire étiquette / entrée: case à cocher (2 lignes) dans le formulaire pour chaque nouvelle classe d'images.
<!-- Place this inside your <head> -->
<style id="preferences"></style>
<!--PREFERENCE CHECKBOX-->
<div class = "preferanceCheckbox">
<form class ="formBox">
<input id="drive" type="checkbox" value=".pImgDrivingShot">
<label for="drive">Driving Shots</label><br>
<input id="cyber" type="checkbox" value=".pImgCyberPunk">
<label for="cyber">Cyberpunk</label><br>
<input id="city" type="checkbox" value=".pImgCity">
<label for="city">City Related</label>
</form>
</div>
<div class ="photoSectionAlignment pintrestView imgZ">
<!-- CYBERPUNK SHOTS -->
<img src="https://picsum.photos/id/1018/100/50" class = "pImgCyberPunk pImgDrivingShot displayNone"> <img src="https://picsum.photos/id/1022/100/50" class = "pImgCyberPunk pImgCity displayNone">
<img src="https://picsum.photos/id/1023/100/50" class = "pImgCyberPunk pImgtext displayNone">
<!-- DRIVING SHOTS -->
<img src="https://picsum.photos/id/1041/100/50" class = "pImgDrivingShot pImgCity displayNone">
<img src="https://picsum.photos/id/1015/100/50" class = "pImgDrivingShot pImgCity displayNone">
<img src="https://picsum.photos/id/1019/100/50" class = "pImgDrivingShot pImgCyberPunk displayNone">
<!-- CITY SHOTS -->
<img src="https://picsum.photos/id/1080/100/50" class = "pImg pImgCity displayNone">
</div>
Cela fonctionne très bien via votre exemple de codepen, mais pour une raison quelconque, cela ne fonctionne pas lorsque je le copie dans le code de mon projet, j'ai également tout lu 3 fois: (c'est exactement la même formule que ce que vous avez écrit.une idée pourquoi cela ne fonctionnerait pas?
oui, j'ai fini par l'obtenir @KostaX, pour le querySelector choisissant la boîte de formulaire, j'ai dû utiliser form.formbox qui fonctionnait parfaitement. Le seul problème que j'ai maintenant est que j'ai en fait quelques modes de visualisation différents et que je veux appliquer cette même logique à chacun des modes, mais cela ne fonctionne que pour la vue la plus précise .. idk peut-être que je ferai un autre message et vous ferai savoir quand je fais?
Sûr. Assurez-vous simplement d'essayer de le résoudre vous-même et de le publier sur S.O. seulement lorsque vous vous sentez coincé. @JoshMcIntosh
J'essaierais de réduire le nombre de boucles qui sont dans le code Javascript. Je pense que vous voulez vraiment la même logique, mais il y a des variables dans les styles. Si vous pouvez identifier les variables, la boucle peut toutes être gérées en un seul endroit. Voici comment j'ai abordé le problème:
// GLOBAL PREFERENCES CODE
//..................................................................
var drivingCheckBox = document.querySelector(".cBDrivingShot");
var cyberPunkCheckBox = document.querySelector(".cBCyberPunkShot");
var cityCheckBox = document.querySelector(".cBcityRelated");
drivingCheckBox.addEventListener("click", updateFromCheckbox);
cyberPunkCheckBox.addEventListener("click", updateFromCheckbox);
cityCheckBox.addEventListener("click", updateFromCheckbox);
function updateFromCheckbox(evt) {
console.log('In updateFromCheckbox');
var selector = ""; // The class that corresponds to the current checkbox
var otherSelectors = []; // Array of classes that correspond to the OTHER checkboxes
var otherCheckboxes = []; // The boolean settings of the OTHER checkboxes
if (evt.currentTarget === drivingCheckBox) {
selector = "pImgDrivingShot";
otherSelectors = ["pImgCyberPunk", "pImgCity"];
otherCheckboxes = [cyberPunkCheckBox.checked, cityCheckBox.checked];
} else if (evt.currentTarget === cyberPunkCheckBox) {
selector = "pImgCyberPunk";
otherSelectors = ["pImgDrivingShot", "pImgCity"];
otherCheckboxes = [drivingCheckBox.checked, cityCheckBox.checked];
} else if (evt.currentTarget === cityCheckBox) {
selector = "pImgCity";
otherSelectors = ["pImgDrivingShot", "pImgCyberPunk"];
otherCheckboxes = [drivingCheckBox.checked, cyberPunkCheckBox.checked];
}
// Safety check
if (otherSelectors.length != otherCheckboxes.length) {
console.log("otherSelectors AND otherCheckboxes ARE PARALLEL ARRAYS AND SHOULD BE THE SAME LENGTH!");
}
var images = document.querySelectorAll("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var isDisplayed = false;
if (image.classList.contains(selector) && evt.currentTarget.checked) {
isDisplayed = true;
} else {
for (var j = 0; j < otherSelectors.length; j++) {
var otherSelector = otherSelectors[j];
var otherCheckboxIsChecked = otherCheckboxes[j];
if (image.classList.contains(otherSelector) && otherCheckboxIsChecked) {
isDisplayed = true;
break;
}
}
}
if (isDisplayed) {
image.classList.remove("displayNone");
} else {
image.classList.add("displayNone");
}
console.log('Got one ', image.src, 'isDisplayed = ', isDisplayed, 'classList = ', image.classList);
}
}