Question

我有一个带有数据属性的div，里面有几个双引号，因此信息不会被转义，但是必须在我的项目中这样做。

我正在努力获得＆＃34; jj-storefront-hero-rethinking-denim＆＃34;当我将鼠标悬停在div上时的价值。

<div class="test" data-layer-promotion-view="{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}"></div>

这是我写的jQuery：

$( ".test" ).hover(function() {
  var contentAsset = $(this).attr("data-layer-promotion-view");
  console.log(contentAsset)
});

有没有办法在数据属性中选择一组双引号？

请参阅此处的codePen：http://codepen.io/fennefoss/pen/evMLww?editors=1111

Answer 1

使用'和"引号的组合，然后您可以使用.data(key)来检索它。

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，jQuery.parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括引用的属性名称。如果该值不能作为JavaScript值进行解析，则将其保留为字符串。

var data = $('.test').data('layer-promotion-view');
console.log(data.row_type);
console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'></div>

Answer 2

在定义属性

时使用单引号

<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>

</div>

Answer 3

$( ".test" ).hover(function() {
  var contentAsset = $(this).attr("data-layer-promotion-view");
  console.log(contentAsset);
});

.test {
  width: 500px;
  min-height: 100px;
  padding:10px;
  background: red;
}
.test:hover:after {
  content: attr(data-layer-promotion-view);
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>

注意：使用"时出错。在浏览器中查看您的页面源代码，您将了解声明HTML属性的错误。您的属性字符串对于使用"
无效

Answer 4

您可以在属性data-layer-promotion-view值周围添加单引号而不是双引号以正确转义它，然后使用JSON.parse()将字符串解析为对象，无需更改attr()到data()：

$(".test").hover(function() {
  var contentAsset = JSON.parse($(this).attr("data-layer-promotion-view"));
  console.log(contentAsset.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-layer-promotion-view='{"row_type":"row-type-3-dynamic-smart","row_id":"home-page-row-01-widget","column_id":1,"id":"jj-storefront-hero-rethinking-denim","name":null,"creative":"/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw871109fc/jackjones/store-assets/w09/smart-widget/hero/rethinking_denim-dk.jpg"}'>test</div>

在悬停

4 个答案: