В настоящее время у меня проблема при получении значения класса, сгенерированного из php кода

Question

В настоящее время у меня есть проблема с jQuery & PHP.

Когда я пытаюсь выполнить щелчок по клику на классе ".id_annonce" из сгенерированного php кода, он не получает точное значение Я щелкнул, но другой, и это всегда исправить, скрытое значение ввода 18, когда оно должно быть 19 или 20.

Jquery код:

var commander = $(this).val();
  var beta = $('body .id_annonce').val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 

Мой php код:

require 'produits.php';
$pro = new produits;
$coll = $pro->getAllproduits();
foreach ($coll as $key => $value) {

    echo '<div class="card-body  my-3 border-top" >
        <img src="img/resize.jpg" class="card-img-top  " style="height:88px;width:88px;margin-left:20px;float:right;" alt="...">   
        <h3 class="card-title p-2" style="font-size:10px;font-style:none;font-weight:600;"><strong>Ajouté Le : </strong> ' . $value['date_ajout'] . '</h3>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  mb-2  text-muted"><strong>Varieté : </strong>' . $value["variete"] . '</h6>
        <h6 class="card-subtitle p-2 mb-2  text-muted" style="font-style:none;"><strong>Especes :  </strong>5000 tonnes</h6></div>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  text-muted"><strong>Classe : </strong>' . $value["classes"] . '</h6>
        <h6 class="card-subtitle p-2  text-muted" style="font-style:none;"><strong> Quantité :  </strong>' . $value["quantite"] . '</h6></div>
        <h6 class="card-subtitle p-2 mb-2 mt-1 text-muted" style="font-style:none;float:right;font-size:24px;">    <strong>Prix : </strong> ' . $value["prix"] . 'DA/kg</h6> 
        <div class="d-flex flex-row justify-content-start" style="margin-top:50px;">
        <div class="p-1"> <button  class="details" value="' . $value["id"] . '" style="border:none;background:none;"> <i class="fa fa-info-circle fa-2x  pr-2 text-success"></i></button></div>
        <div class="p-1">
        <input type="hidden"  value="' . $value["id"] . '"  class="id_annonce">
        <button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>
        <div class="p-1">  

        <button  value="' . $value["Interesser"] . '" class="interesser btn  btn-md text-dark" style="border-color:green;font-weight:600;">Interesser(' . $value["Interesser"] . ')</button></div></div></div>';

}

Answer 1

Вы получаете элемент за классом (и у нескольких элементов будет один и тот же класс), поэтому вы не получите отдельный. Поэтому вы должны добавить указанный c ID к входу и затем сможете получить его.

HTML вывод по PHP:

echo '<input type="hidden"  value="' . $value["id"] . '" id="annonce-' . $value["id"] . '"  class="id_annonce">'

JS:

var commander = $(this).val();
function goToAnnonce(id) {
  var beta = $('body #' + id).val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
}

и привязать это к кнопке:

echo '<button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '" onclick="goToAnnonce(\'annonce-' . $value["id_commande"] . '\')"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>';

Однако Я хотел бы отметить, что это слишком сложное решение просто для реализации нажатие кнопки, которая меняет страницу. Это можно сделать ОЧЕНЬ проще, изменив кнопку на ссылку:

echo '<a href="panier.php?id=' . $value["id_commande"] . '&annonce=' . $value["id"] . 
'">Click me</a>';

Или связав этот щелчок с кнопкой. См. этот ответ , если вы хотите это сделать.

Answer 2

В коде нажатия кнопки this относится к нажатой кнопке. Вы можете использовать это, чтобы перейти к соответствующему скрытому вводу.

Мой предпочтительный метод - go вверх до общего родителя ($(this).closest(...), затем вниз до нужного входа (.find("input...) также работает, когда вам нужно несколько входов, вверх один раз, вниз несколько раз. Это также уменьшает жесткость, которая поставляется с .next () и аналогичными.

В вашем случае:

$(".commander").on("click", function() {
  var commander = $(this).val();
  var beta = $(this).closest(".card-body").find(".id_annonce").val();
  console.log('panier.php?id=' + commander + '?annonce=' + beta + '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card-body">
  <input type="hidden" value="123" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>

<div class="card-body">
  <input type="hidden" value="456" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>

Answer 3

Я неправильно понял проблему раньше. Вы можете попробовать это:

$('.commander').on('click', function(e) {
    e.preventDefault();
    const commander = $(this).val();
    const beta = $(this).siblings('.id_annonce').val();

    window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
});

Поле ввода id_annonce является родственным для кнопки commander. Таким образом, вы можете получить это, получив одноименного командира кликабированного командира.