Question

我正在尝试创建一个Web商店，我在单选按钮中使用Jquery来选择一个类别，但输出始终在第一个项目上，而不是在每个项目中。

这是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() {
        $(this).change(function() {
            populateswatches();
        });
    });

这是php的代码。但它并不完整。

$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 id="swatches"></span>
            </div>  
            <input type="hidden" value="'.$IDitem.'" name="id_item">        
        </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-success">Add to Cart</button>

这是输出 here is the image output for it

Answer 1

<强> 原因： -

id在unique identifier中被视为jQuery。由于代码中的所有spans都具有相同的id，因此代码仅适用于第一个。

<强> 解决方案： -

将HTML代码中的id转换为class，如下所示： -

<span class="swatches"></span>

并在jQuery中将#更改为.，如下所示： -

$('.swatches').html(html);

注意： - class在jQuery中被视为group identifier，并处理共享相同类的每个元素。

jquery - 输出始终只在第一项中

1 个答案: