將相同的值分配給具有不同ID的所有元素

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元素（6）中寫入的單座沙發的顏色。但是，當我選擇第二張沙發，雙座沙發的顏色代碼時。它覆蓋單人座沙發的顏色代碼div元素以及（20）。

見1西特沙發的代碼已被從改變（6）至（20）。同樣，如果我選擇3 Seater沙發的顏色，它將覆蓋2座位以及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頁面。 但是 我試圖從fancyboxajax.php頁面訪問id時，它只更改/更新了特定的id而不是所有的id。 所以我把id作爲變量傳遞給fancybox，並從fancybox中加載的頁面中分配顏色代碼給特定的id。

這裏是代碼說明

$(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