Получить значение из HTML Object

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

Вы можете использовать data() так:

.data() позволяет нам прикреплять данные любого типа к DOM элементам, безопасным от круговых ссылок и, следовательно, от утечек памяти. Мы можем получить несколько различных значений для одного элемента по одному, или в виде набора:

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

почему вы должны указать "sudoSlider?

Вы также можете использовать sudo-slider.

Он работал как имя свойства происходит следующим образом:

1. Имя атрибута преобразуется только строчными буквами.
2. Префикс данных удаляется из имени атрибута.
3. Любые символы дефиса также удаляются из имени атрибута.
4. Остальные символы преобразуются в CamelCase. Символы, непосредственно следуя за дефисами, удаленными на шаге 3, становятся прописными.

Answer 2

Чтобы получить правильный элемент использовать

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

Вы можете либо получить данных-Судо-слайдер атрибут через

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

В этом случае вам придется преобразовать строку в формате JSON, чтобы получить доступ к свойству паузы:

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

или еще лучше, используйте метод .data()

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

Answer 3

Вы должны использовать .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 4

Вы можете получить это свойство:

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

$('[data-sudo-slider]') является элементом DIV, где data-sudo-slider определен. .data('sudoSlider') - значение свойства данных. data работает с - знаками littlebit different, вы можете прочитать об этом в jQuery data documentation.

.pause - объект JSON объект.