Question

我有以下div（这已经给了我，我没有创建它）：

<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

就我的理解而言（如果我错了请纠正我），我们在这里说，我想将以下值（例如slideCount，moveCount，customLink等等）分配到名为的对象data-sudo-slider。

我在底层JavaScript中尝试做的是从此对象中检索pause的值。这就是我在做的事情：

var sudoEl = jQuery('[data-sudo-slider]'); 
var pause = sudoEl.pause;

即使它识别了滑块对象，它也没有检索我传入的暂停值（返回值为undefined。

如何检索此值？

Answer 1

要检索正确的元素，请使用

var element = $("div[data-sudo-slider]");

您可以通过

获取 data-sudo-slider 属性

var sudoSlider = element.attr("data-sudo-slider");

在这种情况下，您必须将字符串转换为JSON才能访问pause属性：

var pause = JSON.parse(sudoSlider).pause;

或者更好的是，使用.data()方法

var sudoSlider = element.data("sudoSlider");
var pause = sudoSlider.pause;

Answer 2

您应该使用.data()来获取data-sudo-slider值。

返回指定数据存储中jQuery集合中第一个元素的值，由data(name, value)或HTML5 data-*属性设置。

var sudoEl = jQuery('[data-sudo-slider]').data('sudo-slider'); 
alert(sudoEl.pause);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

Answer 3

您可以通过以下方式获得此房产：

$(function () {
    var pause = $('[data-sudo-slider]').data('sudoSlider').pause;
});

$('[data-sudo-slider]')是div元素，其中定义了data-sudo-slider。 .data('sudoSlider')是数据属性值。 data正在处理-个不同的标志，您可以在jQuery data documentation中阅读。

.pause是JSON对象的属性。

Answer 4

您可以像这样使用data()：

.data（）方法允许我们将任何类型的数据附加到DOM 元素以一种不受循环引用安全的方式，因此从内存泄漏。我们可以为a检索几个不同的值单个元素一次一个，或作为一组：

$('[data-sudo-slider]').data('sudoSlider').pause;

为什么你必须指定＆＃39; sudoSlider＆＃39;

您也可以使用sudo-slider。

它的作用是属性名称派生如下：

属性名称将转换为全部小写字母。
数据前缀从属性名称中删除。
也会从属性名称中删除任何连字符。
其余字符将转换为CamelCase。紧接在步骤3中删除的连字符后面的字符变为大写。

从HTML对象中检索值

4 个答案: