Intereting Posts

jquery – первый клик будет привязан ко всем элементам

Я создаю веб-магазин с элементами из базы данных, он имеет модальную категорию с ценой с переключателем, которая изменит меню «Образцы». Проблема в том, что когда я выбираю пункт 2 и нажимаю на цену переключателя, он покажет меню «Образцы», но когда я закрываю этот модальный элемент и выбираю элемент 1, результат пункта 2 также показан в пункте 1, и даже если я нажму радио Кнопка в пункте 1 не отвечает. здесь представлен выходной образец

Вот код jquery

function populateswatches() { var swatchesName = $('input[name=optradio]:checked').val(); $.getJSON('getdata.php', {swatchesName: swatchesName}, function(swatch) { var html = ''; $.each(swatch, function(index, array) { html = html + '<div class="col-md-3 w3-margin-top"><div class="w3-display-container w3-hover-opacity"><div class="w3-center"><input type="radio" name="swatches_code" value="' + array['swatches_code'] + '" required></div><div class="w3-display-middle w3-display-hover"><a href="../backend/functions/images/'+array['images']+'" target="_blank"><button type="button" class="btn btn-primary"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button></a></div><img src="../backend/functions/images/'+array['images']+'" style="width:100%"><div class="w3-center">' + array['swatches_code']+'</div></div></div>'; }); $('.swatches').html(html); }); } $(function() { $('input[name=optradio]').change(function() { populateswatches(); }); });

Вот код php, где будет называться модальный

 <div class="col-md-2 w3-margin-top"> <div class="w3-container"> <div class="w3-display-container w3-hover-opacity"> <h3 class="w3-center">'.$row["prod_name"].'</h3> <img src="../backend/functions/images/'.$row["img"].'" alt="'.$row["prod_name"].'" style="width:100%"> <div class="w3-display-bottommiddle w3-display-hover"> <button class="w3-button w3-blue" data-backdrop="false" data-toggle="modal" data-target="#'.$row["id_num"].'">MORE INFO</button> </div> </div> </div>

здесь приведен код php для модального и переключателя

 <div id="'.$row["id_num"].'" class="modal fade" role="dialog">

 <!-- Modal content--> <div class="modal-content modal-lg"> <form class="store-item"> <div class="modal-header"> <h3 class="modal-title" style="color:black">'.$row["prod_name"].'</h3> </div> <div class="modal-body"> <div class="w3-row-padding"> <div class="w3-half"> <img src="../backend/functions/images/'.$row["img"].'" alt="Avatar" style="width:100%"> </div> <div class="w3-half"> <ul class="w3-ul w3-border"> <li class="w3-light-grey w3-padding-8"> <h4 style="color:black">Description</h4> <p>'.$row["description"].'</p> </li> <li class="w3-padding-8"> <h4 style="color:black">SIZE</h4> <p>H-'.$row["height"].' | W-'.$row["width"].' | L-'.$row["length"].'</p> </li> <li class="w3-light-grey w3-padding-8"> <h4>PRICES</h4>$priceSQL="SELECT * FROM price WHERE id_item='$IDitem'"; $priceRES=mysqli_query($conn,$priceSQL); while($priceROW=mysqli_fetch_assoc($priceRES)){ $id_categ=$priceROW["id_category"]; $catSQL="SELECT * FROM category WHERE id_category='$id_categ'"; $catRES=mysqli_query($conn,$catSQL); while($catROW=mysqli_fetch_assoc($catRES)){ echo ' <div class="radio"> <label><input type="radio" name="optradio" value="'.$priceROW["price"].'-'.$id_categ.'" required>'.$catROW["swatches_category"].'- ₱'.formatMoney($priceROW["price"]).'</label> </div> '; } } </li> </ul> <h4>SWATCHES</h4> <div class="form-group"> <span class="swatches"></span> </div> <input type="hidden" value="'.$IDitem.'" name="id_item"> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="refresh()" class="btn btn-default">Close</button> <button type="submit" class="btn btn-success">Add to Cart</button> </div> </form> </div></div></div>}` в <!-- Modal content--> <div class="modal-content modal-lg"> <form class="store-item"> <div class="modal-header"> <h3 class="modal-title" style="color:black">'.$row["prod_name"].'</h3> </div> <div class="modal-body"> <div class="w3-row-padding"> <div class="w3-half"> <img src="../backend/functions/images/'.$row["img"].'" alt="Avatar" style="width:100%"> </div> <div class="w3-half"> <ul class="w3-ul w3-border"> <li class="w3-light-grey w3-padding-8"> <h4 style="color:black">Description</h4> <p>'.$row["description"].'</p> </li> <li class="w3-padding-8"> <h4 style="color:black">SIZE</h4> <p>H-'.$row["height"].' | W-'.$row["width"].' | L-'.$row["length"].'</p> </li> <li class="w3-light-grey w3-padding-8"> <h4>PRICES</h4>$priceSQL="SELECT * FROM price WHERE id_item='$IDitem'"; $priceRES=mysqli_query($conn,$priceSQL); while($priceROW=mysqli_fetch_assoc($priceRES)){ $id_categ=$priceROW["id_category"]; $catSQL="SELECT * FROM category WHERE id_category='$id_categ'"; $catRES=mysqli_query($conn,$catSQL); while($catROW=mysqli_fetch_assoc($catRES)){ echo ' <div class="radio"> <label><input type="radio" name="optradio" value="'.$priceROW["price"].'-'.$id_categ.'" required>'.$catROW["swatches_category"].'- ₱'.formatMoney($priceROW["price"]).'</label> </div> '; } } </li> </ul> <h4>SWATCHES</h4> <div class="form-group"> <span class="swatches"></span> </div> <input type="hidden" value="'.$IDitem.'" name="id_item"> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="refresh()" class="btn btn-default">Close</button> <button type="submit" class="btn btn-success">Add to Cart</button> </div> </form> </div></div></div>}` в <!-- Modal content--> <div class="modal-content modal-lg"> <form class="store-item"> <div class="modal-header"> <h3 class="modal-title" style="color:black">'.$row["prod_name"].'</h3> </div> <div class="modal-body"> <div class="w3-row-padding"> <div class="w3-half"> <img src="../backend/functions/images/'.$row["img"].'" alt="Avatar" style="width:100%"> </div> <div class="w3-half"> <ul class="w3-ul w3-border"> <li class="w3-light-grey w3-padding-8"> <h4 style="color:black">Description</h4> <p>'.$row["description"].'</p> </li> <li class="w3-padding-8"> <h4 style="color:black">SIZE</h4> <p>H-'.$row["height"].' | W-'.$row["width"].' | L-'.$row["length"].'</p> </li> <li class="w3-light-grey w3-padding-8"> <h4>PRICES</h4>$priceSQL="SELECT * FROM price WHERE id_item='$IDitem'"; $priceRES=mysqli_query($conn,$priceSQL); while($priceROW=mysqli_fetch_assoc($priceRES)){ $id_categ=$priceROW["id_category"]; $catSQL="SELECT * FROM category WHERE id_category='$id_categ'"; $catRES=mysqli_query($conn,$catSQL); while($catROW=mysqli_fetch_assoc($catRES)){ echo ' <div class="radio"> <label><input type="radio" name="optradio" value="'.$priceROW["price"].'-'.$id_categ.'" required>'.$catROW["swatches_category"].'- ₱'.formatMoney($priceROW["price"]).'</label> </div> '; } } </li> </ul> <h4>SWATCHES</h4> <div class="form-group"> <span class="swatches"></span> </div> <input type="hidden" value="'.$IDitem.'" name="id_item"> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="refresh()" class="btn btn-default">Close</button> <button type="submit" class="btn btn-success">Add to Cart</button> </div> </form> </div></div></div>}`

Я думаю, что проблема заключается в следующих строках:

 var swatchesName = $('input[name=optradio]:checked').val(); -- $('.swatches').html(html); -- $('input[name=optradio]').change(function() { populateswatches(); });

Они не только нацеливаются на элементы в активном модальном окне, но и на все элементы, которые соответствуют предоставленным селекторам. Таким образом, это выходит за рамки активного модального окна и включает все другие модальные окна.

$('.swatches').html(html); изменит HTML всех элементов с именем класса swatches , а не просто в активном модальном окне. Это объясняет, почему вы видите результаты первого элемента вместе с другими элементами.
Затем, когда вы пытаетесь изменить параметр, вы сталкиваетесь с проблемой var swatchesName = $('input[name=optradio]:checked').val(); потому что он всегда будет возвращать значение переключателя, которое вы отметили первым элементом.

Чтобы решить эту проблему, вы можете передать элемент, на который была нажата функция populateswatches . В этой функции вы можете искать родительский модальный элемент, к которому принадлежит этот элемент. Для любых других элементов, которые вы хотите настроить, вы ищете только элементы, которые ниже этого модального.

 function populateswatches($el) { var $modal = $el.closest('.modal'); var swatchesName = $el.val(); $.getJSON('getdata.php', {swatchesName: swatchesName}, function(swatch) { var html = ''; $.each(swatch, function(index, array) { html = html + '<div class="col-md-3 w3-margin-top">' + '<div class="w3-display-container w3-hover-opacity">' + '<div class="w3-center">' + '<input type="radio" name="swatches_code" value="' + array['swatches_code'] + '" required>' + '</div>' + '<div class="w3-display-middle w3-display-hover">' + '<a href="../backend/functions/images/'+array['images']+'" target="_blank">' + '<button type="button" class="btn btn-primary">' + '<i class="fa fa-search fa-lg" aria-hidden="true"></i>' + '</button>' + '</a>' + '</div>' + '<img src="../backend/functions/images/'+array['images']+'" style="width:100%">' + '<div class="w3-center">' + array['swatches_code']+'</div>' + '</div>' + '</div>'; }); $modal.find('.swatches').html(html); }); } $(function() { $('input[name=optradio]').on('click', function() { populateswatches($(this)); }); });