Выбор элементов на основе значений ключа атрибута данных

Question

У меня есть данные, прикрепленные к нескольким элементам div с тем же классом, что я пытаюсь создать фильтр, который отображает/скрывает их на основе значений данных, присвоенных этим элементам. Мне нужно развернуть данные, чтобы выбрать элемент, основанный на значениях определенных ключей в данных.

Вот пример одного из DIVS HTML

<div class="design-layouts" data-json-object="{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10..."24","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}"> 

мне нужно что-то вдоль линий это, что на самом деле работает, хотя.

$(".design-layouts[data-json-object='id':'1']").show(); 
$(".design-layouts[data-json-object='color_name':'Red']").show(); 

Answer 1

Первая проблема заключается в том, что атрибут является недействительным, так как он заканчивается, как первый " в нем. Вам нужно будет преобразовать все " в атрибуте в " (поскольку значения атрибутов являются HTML-текстом) или (проще) просто использовать одинарные кавычки вокруг значения атрибута (при условии, что в значении нет ').

Затем, вы можете использовать «атрибут содержит» селектор, чтобы сделать что-то близкое к тому, что вы хотите:

$(".design-layouts[data-json-object*='\"id\":\"1\"']").css("color", "blue");

<div class="design-layouts" data-json-object='{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}'>Text in the div</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

... но проблема в том, что это чисто текстуально.

Вместо этого вам, скорее всего, нужно будет перебрать соответствующие элементы, проанализировать JSON, а затем решить, что делать. Вы можете сделать это с filter:

$(".design-layouts[data-json-object]").filter(function() { 
 
    return JSON.parse($(this).attr("data-json-object")).id == "1"; 
 
}).css("color", "blue");

<div class="design-layouts" data-json-object='{"id":"1","layout_name":"Layout 1","side":"1","orientation":"Horizontal","has_image_area":"1","tags":"fresh, happy, test","categories":[{"id":"30","category_name":"aaa"},{"id":"1","category_name":"Agriculture & Farming"},{"id":"2","category_name":"Animals & Pet Care"},{"id":"3","category_name":"Art & Entertainment"},{"id":"34","category_name":"asdfasf"},{"id":"4","category_name":"Automotive & Transportation"},{"id":"5","category_name":"Beauty & Spa"},{"id":"6","category_name":"Business Services"},{"id":"10","category_name":"Travel & Airline"}],"styles":[{"id":"1","style_name":"Abstract","parent_id":"0"},{"id":"2","style_name":"Bold","parent_id":"0"},{"id":"3","style_name":"Patriotic & Military","parent_id":"2"}],"colors":[{"id":"2","color_name":"Blue","rgb_value":null,"hex_value":"#009cff"},{"id":"4","color_name":"Brown","rgb_value":null,"hex_value":"#746451"},{"id":"1","color_name":"Grayscale","rgb_value":null,"hex_value":"#666666"},{"id":"3","color_name":"Red","rgb_value":null,"hex_value":"#ed1c24"}]}'>Text in the div</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Это позволяет сделать гораздо более сложные условия, вокруг которых элементы, чтобы выбрать.

Если вы собираетесь сделать это несколько раз, она вполне может быть полезно когда загружаются элементы для хранения разобранный результат в data кэш JQuery в:

$(".design-layouts[data-json-object]").each(function() { 
    var $this = $(this); 
    $this.data("jsonObject", JSON.parse($this.attr("data-json-object"))); 
}); 

... а затем дон после обработки их придется переписывать позже. (Имя, которое я выбрал выше, jsonObject, это имя JQuery будет автоматически присвоит, что data-* атрибута Вы можете использовать другое имя, если вам понравилось, хотя.).

Answer 2

Я считаю, что что-то похожее на это следует сделать трюк:

$('.design-layouts[data-json-object*=\""id":"1"\"]') 

Answer 3

Вы можете использовать объект атрибута для получения данных. EG

var dat = element.attributes["data-name-you-want"].value; 
              // gets the value stored in 
              // the data attribute of an 
              // element. You can also use 
              // dot notation and camel case 
var dat element.attributes.dataNameYouWant.value; 

Так что в вашем случае вы

if(element.attributes["data-json-object"]){ // make sure the data is there 
    // now parse it and look for the attribute you are after in the JSON 
    if((JSON.parse(element.attributes["data-json-object"].value)).colour_name === 'red'){ 
     // you have found the colour red.. 
    } 
} 

Хотя я бы обернуть все это в попытке поймать, так как JSON трудно предсказать ошибки, вы используете JQuery.