одинаковое значение присваивается всем элементам, которые имеют разные идентификаторы

Question

Я создаю и приложение, которое имеет настроенную корзину покупок.

Я использую fancybox (ajax), чтобы получить цветовые коды для пяти разных типов дивана (Мебель). После того, как fancybox загружает содержимое (цвета) из базы данных, я могу выбрать и выбрать цвет для каждого типа дивана. Я связал код с каждым цветом, который я получаю в переменной (colorCode). Я могу получить код цветового от страницы HTML, код

$('body').on('click', '.margin', function() { 
    // Get the code of selected Color 
    colorCode= $(this).children('.color-code').text(); 

    //Write the selected color-code in the div-element on frontend so that user can see the selected color code. 
    $('#'+selectedIdCode).empty().text(colorCode); 
    }); 

Теперь, если я нажимаю на выборе опции, будет отображаться FancyBox с цветами, я могу выбрать цвет, нажав на них, и выбранный цвете отображается в Div-элемента цветовом для пользователя

Но это работает отлично только в первый раз, и если я выбираю цвет для второго продукта, он ведет себя соответственно, но в конце он обновит цветовой код предыдущего Дивана до нового.

Предположим, что я выбрал цвет одноместного дивана, который он пишет в цветовом коде div-element (6). Но когда я выбираю цветовой код для второго дивана, двухместного дивана. Он перезаписывает элемент div цветового кода дивана Single-Seater, а также (20).

Смотрите код на 1 местный диван был изменен из (6) в (20). Точно так же, если я выберу цвет для 3-х местного дивана, он перепишет цветовые коды 2-Seater, а также 1-местный диван.

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

$('body').on('click', '.margin', function() { 

---

ОБРАЗЦА HTML КОД

<td> 
    <div class="btn-group select-color-minwidth"> 
     <div class="btn" id="1seater-code">Select Color</div> 
     <a class="code-selector fancybox.ajax btn" id="1seater">       
      <i class="fa fa-pencil"></i>       
     </a> 
    </div>      
    </td> 

    <td> 
    <div class="btn-group select-color-minwidth"> 
     <div class="btn" id="2seater-code">Select Color</div> 
     <a class="code-selector fancybox.ajax btn" id="2seater">       
      <i class="fa fa-pencil"></i>       
     </a> 
    </div>      
    </td> 
    <td> 
    <div class="btn-group select-color-minwidth"> 
     <div class="btn" id="3seater-code">Select Color</div> 
     <a class="code-selector fancybox.ajax btn" id="3seater">       
      <i class="fa fa-pencil"></i>       
     </a> 
    </div>      
    </td> 

Jquery КОД

$(document).ready(function() { 

    $('.code-selector').click(function(){  
     var colorCode; 
     //Which category is clicked 1 Seater or 2 Seater or 3 Seater etc 
     var selectedId = $(this).attr('id'); 
     //The id of the Div-Element where the value for selected code will be displayed 
     var selectedIdCode = selectedId+'-code'; 

    $(".code-selector").fancybox({ 
     padding:10, 
     margin:100, 
     openEffect : 'elastic', 
     openSpeed : 150, 
     closeEffect : 'elastic', 
     closeSpeed : 500, 
     closeClick : false, 
     href : 'fancyboxajax.php', 
     helpers : { 
      overlay : null 
     } 
     }); 

    $('body').on('click', '.margin', function() { 
     // Get the code of selected Color 
     colorCode= $(this).children('.color-code').text(); 

     //Update the selected Color code 
     $('#'+selectedIdCode).empty().text(colorCode); 
     }); 
    }); 
}); 

И, наконец, FANCYBOXAJAX.PHP

<script type="text/javascript"> 
    $('.margin').click(function(){  

    //Remove selection from other and apply to the Current one 
    $('.selected').css('display','none'); 
    $(this).children('.selected').css('display','block');  

    // Show the save button 
    $('.save-button').css('display','block');  

    // take user to Save button 
    $(".fancybox-inner").animate(
     { scrollTop: 0 }, 
     { 
      duration: 100, 
      easing: 'linear' 
    });  

    // Close the Fancy box 
    $('#close-njk').click(function() { 
     $.fancybox.close();  
    }); 
    }); 
</script> 


    <div class="tiles"> 
     <p>Select any color and click on save Button, Below</p> 

     <div class="save-button"> 
     <button class=" col-3 btn btn-primary " id="close-njk">Save</button> 
     </div> 

     <?php 

     $db->set_table('raw_material'); 
     $results = $db->all(); 

     foreach ($result as $result) { 

      echo '<div class="margin"> 
      <div class="selected"><img src="check_success-64.png"></div> 
      <img class="njk-img" src="gallery/raw_material_tiles_2/'.$result['material_name'].'.jpg" width="100" height="75"> 
      <div style="display:none" class="color-code">'.$result['id'].'</div> 
      </div>'; 
     } 

     ?> 

    </div> 

Любая помощь в этом отношении приветствуется.

Благодаря

Answer 1

К счастью, я нашел ее решение

Моя главная проблема заключалась в том, что я пытался получить цвет-код от переднего конца или мою страницу HTML. Но I Когда я попытался получить доступ к id с страницы fancyboxajax.php, он изменил/обновил только конкретный идентификатор, а не все идентификаторы. Итак, я передал id как переменную в fancybox и со страницы, загружаемой в fancybox, и назначил цветовые коды конкретному идентификатору.

здесь код иллюстрации

$(document).ready(function() {  
    $('.code-selector').click(function(){ 
    var colorCode; 
    //Which category is clicked 1 Seater or 2 Seater or 3 Seater etc 
    var selectedId = $(this).attr('id'); 
    //The id of the Div-Element where the value for selected code will be displayed 
    var selectedIdCode = selectedId+'-code'; 
    //Get the respective selected option id 
    var selectedOption = '#'+selectedId+'-option'; 
    //Get the respective selected option id value 
    var selectedOptionValue = $(selectedOption).find(":selected").attr('value');  
    $(".code-selector").fancybox({ 
     padding:10, 
     margin:100, 
     openEffect : 'elastic', 
     openSpeed : 150, 
     closeEffect : 'elastic', 
     closeSpeed : 500, 
     closeClick : false, 
     href : 'fancyboxajax.php?code='+selectedIdCode+'&option='+selectedOptionValue, 
     helpers : { 
     overlay : null 
     } 
    }); 
    }); 
}); 

и страница fancyboxajax.php соответственно

var code ="<?php echo $_GET['code']; ?>"; 
    var option = "<?php echo $_GET['option']; ?>"; 
    // Close the Fancy box 
    $('#close-njk').click(function() { 
    $.fancybox.close(); 
    $('#'+code).text(color); 
    $('#'+code+'-color').val(color);  
    }); 

Спасибо всем, кто потратил время на мой вопрос и дал ценные предложения.

Answer 2

Вы можете попробовать сцепления методов вместо вложенности их как

jQuery(document).ready(function ($) { 
    $('.code-selector').click(function() { 
     var colorCode; 
     //Which category is clicked 1 Seater or 2 Seater or 3 Seater etc 
     var selectedId = this.id; 
     //The id of the Div-Element where the value for selected code will be displayed 
     var selectedIdCode = selectedId + '-code'; 
     alert(selectedId); 
    }).fancybox({ 
     // fancybox options 
    }); 
}); // ready 

Обратите внимание, что переменные доступны только внутри метода click но вы можете объявить их в глобальном масштабе чтобы сделать их доступными для других методов

См. JSFIDDLE