Я создаю интернет-магазин с товарами из базы данных, в нем есть модальная категория с ценой и переключателем, который изменяет меню образцов. Проблема в том, что когда я выбираю элемент 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>}`
2
Cliford Ching 3 Июл 2017 в 10:26
У каждого элемента есть собственное модальное окно? Или есть одно модальное окно, которое повторно используется путем изменения его содержимого через AJAX?
 – 
vi5ion
3 Июл 2017 в 12:05
Это единственный модальный режим, который используется повторно.
 – 
Cliford Ching
3 Июл 2017 в 12:29
Вы заменяете все содержимое, а также переключатели? В этом случае вы создаете новые переключатели для optradio, к которым еще не прикреплено событие изменения. Это можно исправить, делегировав событие изменения: $(document).on('change', 'input[name=optradio]', function() { populateswatches(); });
 – 
vi5ion
3 Июл 2017 в 12:39
Я пробовал, но возникла такая же проблема. между прочим, я отредактировал код, чтобы было очень понятно, как придумать решения.
 – 
Cliford Ching
3 Июл 2017 в 12:48
Не могли бы вы также поделиться кодом, в котором вы фактически меняете содержимое модального окна? Кажется, это единственная часть, которой не хватает, и она, вероятно, ответит на многие вопросы, которые у меня все еще есть :)
 – 
vi5ion
3 Июл 2017 в 12:56

1 ответ

Лучший ответ

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

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

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

$('.swatches').html(html); изменит HTML-код всех элементов с именем класса swatches, а не только span в активном модальном окне. Это объясняет, почему вы видите результаты первого элемента вместе с другими элементами.
Затем, когда вы пытаетесь изменить параметр, вы сталкиваетесь с проблемой с 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));
  });
});
2
vi5ion 3 Июл 2017 в 15:42