3
votes

Je ne peux pas écrire dans DIV tous les éléments de l'objet

J'ai une liste div avec pop-up. Chaque div obtiendra l'attribut data-target d'un objet. Je peux renvoyer tous les éléments de l'objet, mais ne récupérer que le dernier élément.

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

const portolioItemInfos = [
    { dataTarget: "tempero-restaurante" }, 
    { dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");
for (let key of div) {
    for (let item of portolioItemInfos) {
        key.setAttribute("data-target", item.dataTarget);
    }
}

javascript for-loop

2 commentaires

Équivalent Javascript de la fonction zip de Python - Stack Overflow

key.setAttribute remplace la valeur dans l'attribut donné, pas l'ajout

3 Réponses :

1
votes

Votre problème est que vous écrasez l'attribut data-target à chaque boucle. Au lieu de cela, vous devez ajouter à la fin de l'attribut data-target en obtenant la valeur actuelle et en ajoutant la nouvelle valeur à la fin de celle-ci. Vous pouvez faire ceci comme ceci:

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

Voir l'exemple ci-dessous (inspectez l'élément pour voir le résultat):

const portolioItemInfos = [{
    dataTarget: "tempero-restaurante"
  },
  {
    dataTarget: "aksam-gunesi"
  }
]

const divs = document.querySelectorAll(".portfolio-item");
for (let key of divs) {
  for (let item of portolioItemInfos) {
    let prev = key.getAttribute('data-target');
    prev = prev ? prev : ''; // if prev is isn't null, set prev equal to prev. If prev is null, then set prev to the empty string
    
    key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());
  }
}

let prev = key.getAttribute('data-target');
prev = prev ? prev : '';
key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());

0 commentaires

0
votes

Pour chaque div , vous bouclez sur tous vos portolioItemInfos afin que chaque div prenne la dernière valeur de la boucle.

Vous pouvez en fait simplifiez-le et n'avez pas besoin de boucler sur le portolioItemInfos , utilisez simplement l'index d'une boucle for pour attribuer le bon dataTarget . p>

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

const portolioItemInfos = [
  {
    dataTarget: 'tempero-restaurante'
  },
  {
    dataTarget: 'aksam-gunesi'
  }
];

const div = document.querySelectorAll('.portfolio-item');
for (let i = 0; i < div.length; i++) {
   div[i].setAttribute('data-target', portolioItemInfos[i].dataTarget);
}

0 commentaires

0
votes

Vous pouvez utiliser l'approche forEach à la place de la boucle for traditionnelle, comme suit:

div.forEach(function(item, index){
    div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

Vous pouvez également parcourir le tableau d'objets des éléments DOM:

const portolioItemInfos = [
	{ dataTarget: "tempero-restaurante" }, 
	{ dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");

portolioItemInfos.forEach(function(item, index){
	div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

0 commentaires