jquery-第一个点击的将绑定所有项目

Question

我创建了一个网上商店，其中包含来自数据库的商品，它具有类别模式和价格单选按钮，可以更改样本菜单。问题是，当我选择项目 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"].'- &#8369;'.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>}`

Answer 1

我认为问题在于以下几行：

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

这些不只是针对活动模式 window 中的元素，而是所有与提供的选择器匹配的元素。因此，这超出了活动模态 window 的范围，也包括所有其他模态 windows。

$('.swatches').html(html); 将更改类名为 swatches 的所有元素的 HTML，而不仅仅是活动模态 window 中的 span。这解释了为什么您看到第一个项目的结果以及其他项目。
然后，当您尝试更改选项时，您运行变成了 var swatchesName = $('input[name=optradio]:checked').val(); 的问题，因为这个选项将始终 return 您在第一项中选中的单选按钮的值。

要解决此问题，您可以将单击的元素传递给 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));
  });
});

jquery-第一个点击的将绑定所有项目

jquery-the first one to click will bound on all the items

html

php

jquery

w3.css