1
votes

DOM plusieurs ID avec la même fonction

Comment faire en sorte que les identifiants utilisent la même fonction ?. Je prévois de créer plus d'éléments avec la même fonction, mais je ne veux pas créer plus de fonctions.

 var star_1 = document.getElementById("star1");
    var star_2 = document.getElementById("star2");

    var toggle = false;

    favToggle = function() {


        if (toggle === true) {
            star_1.src = "assets/svg/checked-star.svg";

        } else {
            star_1.src = "assets/svg/unchecked-star.svg";
        }

        toggle = !toggle;
    }

     favToggle1 = function() {


        if (toggle === true) {
            star_2.src = "assets/svg/checked-star.svg";

        } else {
            star_2.src = "assets/svg/unchecked-star.svg";
        }

        toggle = !toggle;
    }

    star_1.addEventListener("click", favToggle);
    star_2.addEventListener("click", favToggle1);

javascript html function addeventlistener

4 commentaires

utilisez plutôt une classe, puis vous pouvez parcourir les éléments et appliquer l'événement à chacun d'eux

Le gestionnaire d'événements reçoit un objet événement. Vous pouvez utiliser la propriété target de l'événement pour découvrir quel élément a été cliqué car il s'agit de la cible de l'événement. Cela vous permet d'avoir une fonction qui "bascule" sur la cible. developer.mozilla.org/en-US/docs/Web/ API / élément / click_event

Pouvez-vous également afficher le html - je ne pense pas que votre événement fonctionnera de toute façon car vous ne semblez pas basculer l'une des étoiles précédentes - sûrement s'il s'agit d'un système de notation, vous devez basculer toutes les étoiles jusqu'au clic un. Avez-vous même besoin de js pour compliquer les choses? codepen.io/jamesbarnett/pen/vlpkh

c'est déjà répondu, mais voici le reste du html: codepen.io/nodevillivedon/pen/WmEVYE

4 Réponses :

0
votes

Utilisez querySelectorAll () pour obtenir les deux "# star1, # star2" . Et puis utilisez forEach () et addEventListener () pour chaque élément.

var stars = document.querySelectorAll("#star1,#star2");
stars.forEach(i => {
  i.addEventListener("click",function(){
    if (toggle === true) {
        this.src = "assets/svg/checked-star.svg";
    } else {
        this.src = "assets/svg/unchecked-star.svg";
    }
    toggle = !toggle;
  })
})

2 commentaires

@epascarello mais dans son code, il ne l'a pas mentionné. Son code montre qu'il veut n'avoir qu'une seule variable à bascule

ah, on dirait que vous avez raison ... je pensais que ce n'était pas partagé (pour info, pas le vote négatif)

1
votes

Vous pouvez utiliser le sélecteur de caractères génériques. Dans cet exemple, il s'agit de sélectionner tous les éléments avec id commençant par star . Ensuite, parcourez chacun d'eux et ajoutez un écouteur d'événement à celui-ci

<button id='star1'>Button 1</button>
<button id='star2'>Button 2</button>
<button id='star3'>Button 3</button>
<button id='star4'>Button 4</button>

document.querySelectorAll("[id^='star']").forEach(function(elem) {
  this.addEventListener("click", favToggle);
})

function favToggle() {
  console.log('Button clicked')
}

1 commentaires

Bonne idée concernant querySelectorAll

4
votes

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>

.star {
  height: 5em;
  width 5em;
  background-color: #444444;
  margin: 1em;
  color: white;
}

const toggles = Array.from(document.querySelectorAll('[id^="star"]')).map((x, xi) => {
  x.addEventListener('click', () => {
    if (toggles[xi] === true) {
      x.innerHTML = 'assets/svg/checked-star.svg';
    } else {
      x.innerHTML = 'assets/svg/unchecked-star.svg';
    }

    // Change the state of the toggle for that particular star
    toggles[xi] = !toggles[xi];
  });

  // Setup the initial state of the toggle
  return false;
});

Une alternative utilisant @brk belle idée à propos de querySelectorAll

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>

.star {
  height: 5em;
  width 5em;
  background-color: #444444;
  margin: 1em;
  color: white;
}

// Number of stars you have
const nbStars = 4;

// An array where we keep the toggle state of each star
const toggles = [];

// Deal with the stars. One by one
for (let i = 0; i < nbStars; i += 1) {
  // Setup the initial state of the toggle
  toggles.push(false);

  const star = document.getElementById(`star${i + 1}`);

  star.addEventListener('click', () => {
    if (toggles[i] === true) {
      star.innerHTML = 'assets/svg/checked-star.svg';
    } else {
      star.innerHTML = 'assets/svg/unchecked-star.svg';
    }

    // Change the state of the toggle for that particular star
    toggles[i] = !toggles[i];
  });
}

0 commentaires

0
votes

Le but de l'écriture d'une fonction est de pouvoir réutiliser facilement les fonctionnalités qu'elle fournit. Vous pouvez accéder aux variables externes de votre fonction en les passant comme arguments. Consultez les commentaires dans le code ci-dessous:

<div id="star1">star1</div>
<div id="star2">star2</div>

//Create your vars
var star_1 = document.querySelector('#star1');
var star_2 = document.querySelector('#star2');
var toggle = false;

//Define the function to accept a parameter (a star)
function favToggle(star) {
  if (toggle === true) {
    star.src = "assets/svg/checked-star.svg";
  } else {
    star.src = "assets/svg/unchecked-star.svg";
  }
  toggle = !toggle;

  //Log some info so we can see it's working as expected
  console.log(`${star.id} src property is now: ${star.src}`);
  console.log(`toggle is now: ${toggle}`);
}

//Add your event listeners by passing a reference to the star (this)
star_1.addEventListener("click", function() {
  favToggle(this);
});
star_2.addEventListener("click", function() {
  favToggle(this);
});

0 commentaires