Как получить атрибут элемента HTML в jQuery JSON

Question

Я пытаюсь получить доступ к определенному атрибуту элемента HTML и назначить его свойству JSON.

Сначала я получаю объект JSON из файла и загружаю его в настройки . Затем я просматриваю строки и создаю текстовые входы с различными атрибутами.

Поскольку я использую iris плагин, я стреляю этим сразу после. Вы можете видеть, что я использую функцию changeElements, где используется iris-id (что работает).

Итак, вопрос в том, почему цвет недвижимость в ирисовой части пуста?

function startCorr(jsonFile) { 
    request = new XMLHttpRequest(); 
    request.open('GET', jsonFile, true); 
    request.onload = function() { 
     if (request.status >= 200 && request.status < 400) { 
      settings = JSON.parse(request.responseText); 
      $.each(settings, function(key, jsonRow) { 
       $(sidePanel).append(createInput(key, jsonRow)); 
      }); 
      // iris 
      $('.iris').iris({ 
       color: $(this).attr("iris-color"), // doesn't work 
       width: 200, 
       border: false, 
       hide: false, 
       change: function(event, ui) { 
        changeElements($(this).attr("iris-id"), ui); 
       } 
      }); 
     } else { 
      console.log("Error getting JSON file"); 
     } 
    }; 
    request.send(); 
} 

function createInput(key, jsonRow) { 
    input = "<label>" + jsonRow.name + "<input type='text' class='iris' id='" + jsonRow.section + "' "; 
    input += "iris-color='" + getColor(jsonRow.selectors[0]) + "' iris-id='" + key + "'>"; 
    input += "</label>" 

    return input; 
} 

function getColor(selectorObject) { 
    return $(selectorObject.selector).css(selectorObject.style); 
} 

JSON

[ 
    { 
    "name": "Global text", 
    "section": "text-global", 
    "input": "color", 
    "selectors": [ 
     { 
     "selector": ".button.special", 
     "style": "background-color" 
     }, 
     { 
     "selector": ".button.notSoSpecial", 
     "style": "color" 
     } 
    ], 
    "areas": ["homepage", "detail", "category", "basket"] 
    }, 
    { 
    "name": "Text on hover", 
    "section": "text-hover", 
    "input": "color", 
    "selectors": [ 
     { 
     "selector": "#banner p", 
     "style": "color" 
     } 
    ], 
    "areas": ["homepage", "detail", "category", "basket"] 
    } 
] 

Answer 1

Если вам необходимо получить доступ к данным, относящиеся к элементу, чтобы перейти в опциях плагина один очень общий подход заключается в инициализации плагина в $.each цикла. Внутри петли this является элементом тока

$('.iris').each(function() { 
    var $el = $(this); 
    $el.iris({ 
    color: $el.attr("iris-color"), 
    width: 200, 
    border: false, 
    hide: false, 
    change: function(event, ui) { 
     changeElements($el.attr("iris-id"), ui); 
    } 
    }); 
});