Javascript 基于数据属性选择元素'；s关键值

我将一个数据附加到多个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"}]}">

---

第一个问题是该属性无效，因为它从其中的第一个

“

结束。您必须将该属性中的所有

”

转换为

“

（因为属性值是HTML文本），或者（更容易）在属性值周围使用单引号（前提是值中没有任何

”

）

然后，您可以使用“attribute contains”（属性包含）选择器执行一些接近您所需的操作：

$（“.design layouts[data json object*='\'id\'：\'1\'”））.css（“颜色”，“蓝色”）；

div中的文本

---

我相信类似于此的东西应该会起到作用：

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

---

您可以使用属性对象来获取数据

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很难预测错误，所以我会将其全部封装在一个try-catch中，但您使用的是JQuery。

data-JSON-object=“{id:“1”}”

双引号可能会给您带来问题。

data-JSON-object='{id:“1”}“

对属性使用单引号。明白你的意思了，在我的代码中将它更新为单引号。@RejithRKrishnan我想OP HTML已经转义了。.修复json

“10…”24的这一部分

@DontVoteMeDown:啊，这就是JSON的问题吗？谢谢。我必须承认我没有仔细研究它，因为它与问题有点相切……我在jsonlint中找到了它。com@AnthonyAllard：好交易！如果你的问题得到了回答，那么你会“接受”通过单击要选择的答案旁边的复选标记来选择答案。这会将其从“未回答的问题”列表中删除，并将已接受的答案移至顶部，以供将来的读者阅读。问题TJ，我将如何选择该数据下的类别。

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..
    }
}