爲每個JSON結果，添加CSS與類jquery

我想添加一個顏色來過濾選項在我的網上商店。顏色代碼得到保存，現在我通過json返回它們。我想要做的是將顏色代碼添加到輸入上方的父類。我發現如何更改類名（我需要其他原因），但現在我必須添加顏色代碼，以便json將它們返回頂部，底部。爲每個JSON結果，添加CSS與類jquery

這是我走到這一步：

function onDataReceived(data) { 
     for (var i = 0; i < data.colorInfo.length; i++) { 
      console.log(data.colorInfo[i].colorCode); 
     } 

     $('input[id^="filter_"]').each(function(){ 
      $(this).parent().attr('class','addedClass'); 
      $(this).parent().parent().attr('class','addedClass'); 
     }); 
    } 

    $(document).ready(function() { 

      var url = 'myjsonlink.json'; 
      $.get(url, onDataReceived); 

    });

用的console.log行（data.colorInfo [I] .colorCode）;結果在我需要#fff等3種顏色代碼有沒有辦法插入每個結果上面我有3種輸入類型？

什麼，我想實現的是：

<div style="background-color: data.colorInfo[i].colorCode"> <input> </div>

類似的東西

來源

2016-05-12 Nick Audenaerde

如果您需要爲元素添加新的類名稱，請使用.addClass（「newClassname」）而不是將其視爲屬性。 –

我的代碼當前取代了現有的類，這就是我的意思。 –

function onDataReceived(data) { 
    //for (var i = 0; i < data.colorInfo.length; i++) { 
    // console.log(data.colorInfo[i].colorCode); 
    //} 
    var len = data.colorInfo.length; 

    $('input[id^="filter_"]').each(function(i){ 
     $(this).parent().addClass('addedClass');//attr('class','addedClass'); 
     $(this).parent().parent().addClass('addedClass') 
       .css('background-color',"'" + data.colorInfo[i % len].colorCode + "'"); 
//.attr('class','addedClass'); 
    }); 
}

來源

2016-05-12 16:09:04

我覺得我的做法是從DOM元素的類名來獲取字符串：

var classString = $(this).parent().attr('class','addedClass');

然後將其分開並循環：

var newClasses = []; //initalize the new classes array 
var classes = classString.split(/ /); 
for(var a=0; a<classes.length; a++){ 
    var colorObj = data.colorInfo[a]; //get the relevant color object 
    if(colorObj){ 
     newClasses.push(classes[a] + '-' + colorObj.colorCode); // 
    } 
}

然後與新創建的替換舊的類：

$(this).parent().attr('class', newClasses.join(' '));

類似的東西。您可能首先要測試它;）

來源

2016-05-12 13:57:31

爲每個JSON結果，添加CSS與類jquery

回答

相關問題