J'ai un code comme le suivant, et je veux obtenir le post_id unique du post correspondant lorsque je clique sur like / comment / star.

J'ai ajouté une balise d'entrée cachée pour stocker la valeur du post_id de chaque publication et essayer d'obtenir la valeur chaque fois que l'on clique sur le lien / commentaire / étoile. Mais je n'ai pas pu obtenir la valeur.

Existe-t-il un autre moyen d'y parvenir? ou puis-je aller avec la même logique. J'utilise ajax pour faire fonctionner comme / comment / star (pas de rafraîchissement). Alors, comment puis-je obtenir le post_id afin de pouvoir utiliser le code Ajax pour communiquer avec le serveur.

$(".like").on("click", function() {
  var val = $(this).closest("div.post").find("input[id='post_id']").val();
  alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <input type="hidden" class="post_id" value="post_id-2">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>
3
Harish ST 16 avril 2018 à 08:16

3 réponses

Meilleure réponse

Vous pouvez utiliser l'attribut data sur l'image pour éviter les entrées masquées et la répétition des identifiants uniques:

$(".like").on("click", function() {
  var val = $(this).data('id');
  alert(val);
});
.like {
  curosor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-1">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-2">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <img alt="Image-n">
  <img class="like" alt="like" data-id="post_id-n">
  <img class="star">
  <img class="comment">
</div>
6
Taki 16 avril 2018 à 05:25

Le code JS devrait ressembler à:

  var val = $(this).parent(".post").find(".post_id").val();

Et faites votre HTML comme:

$(".like").on("click", function() {
  var val = $(this).parent(".post").find(".post_id").val();
  alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="comment">
</div>

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="comment">
</div>

La raison pour laquelle j'ai utilisé class="post_id" est que id d'un champ de saisie ou d'un élément ne peut pas être dupliqué .

Pour votre information, j'ai ajouté une REMARQUE ci-dessous concernant l'utilisation multiple d'un id similaire pour un élément HTML.

Plusieurs éléments peuvent-ils avoir le même ID?

Oui - qu'il s'agisse de la même balise ou non, les navigateurs afficheront la page même si plusieurs éléments ont le même ID.

Est-ce du HTML valide?

Non . Cela est toujours vrai à partir du HTML 5.1 spec. Cependant, la spécification indique également que getElementById doit renvoyer le premier élément avec l'ID donné, ce qui rend le comportement non indéfini dans le cas d'un document non valide.

Quelles sont les conséquences de ce type de code HTML invalide?

La plupart des navigateurs (sinon tous) ont et choisissent toujours le premier élément avec un ID donné, lors de l'appel de getElementById. La plupart des bibliothèques qui trouvent des éléments par ID héritent de ce comportement. La plupart des navigateurs (sinon tous) appliquent également des styles attribués par des sélecteurs d'ID (par exemple #myid) à tous les éléments avec l'ID spécifié. Si c'est ce que vous attendez et ce que vous avez l'intention, il n'y a pas de conséquences inattendues. Si vous attendez / prévoyez quelque chose d'autre (par exemple, pour tous les éléments avec cet ID à retourner, ou pour que le style s'applique à un seul élément), vos attentes ne seront pas satisfaites et toute fonctionnalité reposant sur ces attentes échouera.

Certaines bibliothèques javascript ont des attentes qui ne sont pas satisfaites lorsque plusieurs éléments ont le même ID

Conclusion

Si votre code fonctionne comme prévu dans vos environnements actuels et que ces ID sont utilisés de manière prévisible / maintenable, alors il n'y a que 2 raisons pratiques à considérer de NE PAS FAIRE :

  • Pour éviter le risque de vous tromper, et l'une des bibliothèques que vous utilisez ne fonctionne pas correctement lorsque plusieurs éléments ont le même ID.
  • Pour maintenir la compatibilité ascendante de votre site Web / application avec les bibliothèques ou services (ou développeurs!) Qui fonctionnent mal lorsque plusieurs éléments ont le même ID, que vous pourriez rencontrer à l'avenir.

Les identifiants doivent-ils être uniques ? OUI.

Les identifiants doivent-ils être uniques ? NON, au moins IE et FireFox permettent à plusieurs éléments d'avoir le même ID

3
Sinto 16 avril 2018 à 05:45

Vous pouvez utiliser la fonction siblings pour obtenir la valeur d'entrée.

Par exemple.

$(".like,.comment,.star").on("click", function() {
  var val = $(this).siblings("input.post_id").val();
  console.log("%s clicked on post %s.", this.className, val);
});
.like,
.comment,
.star {
  width: 20px;
  height: 20px;
}

.like {
  background: blue;
}

.comment {
  background: orange;
}

.star {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <input type="hidden" class="post_id" value="post_id-2">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

La solution de Taki serait cependant la meilleure. Si vous devez obtenir l'identifiant en cliquant sur les 3 images, vous pouvez définir le data-id à la div parent à la place.

Par exemple.

HTML:

<div class="post" id="post-n" data-id="n">
  <h1>
    Post Titlen
  </h1>
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

JS:

var id = $(this).parent("div").data("id")
3
H77 16 avril 2018 à 05:41