Принятие значений переменных из атрибутов данных HTML

*РЕДАКТИРОВАТЬ

У меня есть список в моем HTML под названием "#список слов", В этом списке я держу слова в моей игре, прикрепленный звук и прикрепленное изображение к каждому слову. Это все отлично работает.

Поскольку будут разные версии игры, меня попросили взять некоторые переменные, способные изменить количество слов для завершения, размер сетки и т. Д .; и поместите их в качестве атрибутов данных в списке. (Обеспечение доступности всех факторов редактирования в одном месте).

Проблема в том, что я могуне могу понять, как я собираюсь ввести значение для чего-то вроде "Количество входов» ниже и что меняем переменнуючисла» в сценарии.

Возможно ли это сделать?

Вот список (data-word, data-audio и data-pic все в порядке)


        
        
        
        
        
        
        
        
        
        

Вот переменная, которую мне нужно изменить через атрибуты данных в HTML

var numberInput = 2;
var completionNumber = 2;
var smallGrid = {
    x: 4,
    y: 4
};
var largeGrid = {
    x: 8,
    y: 6
};

Так в принципе, так что если"data-number-input="2" это сделало бы переменную"numberInput = 2;" в сценарии,

 Milo-J06 нояб. 2012 г., 15:57
Извините, проверьте edit @robertc
 Jay Blanchard06 нояб. 2012 г., 15:57
Вам нужно изменить эти атрибуты на атрибуты данных.
 Milo-J06 нояб. 2012 г., 16:08
Я нене знаю, как извлечь значение из атрибута data @ user1689607
 I Hate Lazy06 нояб. 2012 г., 15:59
Что именно ты спрашиваешь. Вы спрашиваете, как получить значение атрибута данных из элемента? Если так, какое событие должно вызвать это?
 Jay Blanchard06 нояб. 2012 г., 16:02
Вы можете использовать .data (), чтобы получить значения из этих атрибутов. Для установки значений вы должны использовать attr ().
 Milo-J06 нояб. 2012 г., 16:04
Я пытаюсь изменить переменную в значении скриптов через соответствующее значение атрибутов данных. Так что еслиДанные номер входов = «2»» это сделало бы переменнуюnumberInput = 2; "
 I Hate Lazy06 нояб. 2012 г., 16:06
@ Мило-J: Да, но где ты застрял? Мы уже знаем, что вы понимаете, как присвоить значение переменной. Так что вы нене знаете, как настроить обработчик событий? Или ты нене знаете, как получить значение?
 I Hate Lazy06 нояб. 2012 г., 16:10
Хорошо, в таком случае, вы сначала искали ответ?Как я могу получить значение атрибута данных из моего элемента tr?
 robertc06 нояб. 2012 г., 15:55
number-inputcompletion-number а такжеgrid неатрибуты данных.
 Oscar Jara06 нояб. 2012 г., 17:06
-1 Вы, ребята, совсем запутались и попросили что-нибудьне ясно, но хорошо, я могу жить с этим, но тогда неНе знаю, что именно нужно, когда уже получил ответ с большим количеством информации.

Ответы на вопрос(2)

Решение Вопроса

Прежде всего, вашhtml WASN»не очень хорошо, вы должны изменить это на :(

data атрибуты были исправлены ...)

HTML:

Затем, чтобы назначить новые значенияdata атрибуты, используйте следующее. В этом случае я просто повлиял на первыйli но вы можете сделатьloop или же.map() в jQuery, если вы хотите изменить их все.

Live DEMO: http://jsfiddle.net/oscarj24/qWyj6/1/

Код JQuery:

var numberInput = 2;
var completionNumber = 2;
var smallGrid = {
    x: 4,
    y: 4
};

//In this case, this is just affecting the first 'li' inside 'ul' that's why '.eq(0)' is used.
elem = $('ul#wordlist li').eq(0);
elem.data('number-input', numberInput.toString());
elem.data('completion-number', completionNumber.toString());
elem.data('grid', smallGrid.x + ',' + smallGrid.y);

//Print new 'data' attributes in console to look they've changed.
console.log(elem.data('number-input'));
console.log(elem.data('completion-number'));
console.log(elem.data('grid'));

Меняя всеli атрибуты:

просто сделайте это с помощью jQuery, это как "эквивалент» из:loop

Live DEMO: http://jsfiddle.net/oscarj24/qWyj6/2/

(В живом демо проверьте браузерс консоли, чтобы увидеть вывод)

$('ul#wordlist li').map(function(i, v) {
    $(this).data('number-input', numberInput.toString());
    $(this).data('completion-number', completionNumber.toString());
    $(this).data('grid', smallGrid.x + ',' + smallGrid.y);
});​

Если вы хотите получитьdata атрибут изli и вставьте переменную, просто сделайте это:

//Getting 'number-input' attribute from the first 'li':
var numberInput = $('ul#wordlist li').eq(0).data('number-input');

Но, если вы хотите получить всеdata атрибуты от всехli и поместите их в переменные или JavaScriptobjectПросто сделайте это:

var data = $('ul#wordlist li').map(function(i, v) {

    var numberInput = $(this).data('number-input');
    var completionNumber = $(this).data('completion-number');
    var gridX = $(this).data('grid').split(',')[0];
    var gridY = $(this).data('grid').split(',')[1];

    return {
        numberInput: numberInput,
        completionNumber: completionNumber,
        grid: {
            x: gridX,
            y: gridY
        }
    };
}).get();

Live DEMO: http://jsfiddle.net/oscarj24/qWyj6/3/

Это будет вывод:

И, чтобы получить, например,number-input значение с первогоli этогоobjectПросто сделайте это:

console.log(data[0].numberInput);

Надеюсь это поможет :-)

 Oscar Jara06 нояб. 2012 г., 16:44
Ну, код для изменения необходимых атрибутов, я думаю, что этоясно. @ Мило-J
 Milo-J06 нояб. 2012 г., 16:12
Позволяет ли это мне изменить через HTML? @ Оскар Хара
 Oscar Jara06 нояб. 2012 г., 16:16
@ Milo-J Нет, ты должен указать в качестве моего примера, чтоновое значение для каждогоdata приписывать.
 Oscar Jara06 нояб. 2012 г., 16:23
@ Milo-J проверьте мое обновление, если вы хотите изменить всеli значения атрибутов.
 Milo-J06 нояб. 2012 г., 16:53
было бы что-то в этом роде? numberInput.push ({"вход»: elm.data ("Количество входов»),});
 Oscar Jara06 нояб. 2012 г., 16:31
Эй, вы не можете автоматически назначать нужные значения в нужном месте, не указывая, проверьте обновленную часть моего поста, если вы хотите изменить всеli данные просто делают это @ Milo-J
 Milo-J06 нояб. 2012 г., 16:15
Так что если я изменилсяДанные номер-вход» до 1, точисла» изменится на 1, а? @ Оскар Хара
 Oscar Jara06 нояб. 2012 г., 16:35
@AMD, мне кажется, это не совсем понятно, чего ты хочешь достичь? изменить только один атрибут данных li? изменить все атрибуты данных одного li? или изменить все атрибуты данных всех li? В первом и втором случае вы можете следовать моему первому примеру (если вы просто хотите изменить ввод числа, нет причин назначать другие значения). Для третьего случая просто следуйте последней части моего поста, я действительно нене понимаю, что не ясно.
 Oscar Jara06 нояб. 2012 г., 16:14
@ Milo-J Да,jQuery изменяет вашDOM без проблем, но ты выигралне сможет увидеть это, когда, возможно, делает правый клик и смотритhtml исходный код, но этос изменениями в.DOM
 Milo-J06 нояб. 2012 г., 16:45
я бы но их вli> ты думаешь? @AMD
 A.M. D.06 нояб. 2012 г., 16:39
Извинения, мой комментарий, который началсяВы'Мне нужно отследить, кто из ваших LI ... должен был быть ответ на оригинальный постер. Я думаю, что мы согласны Оскар Хара
 A.M. D.06 нояб. 2012 г., 16:32
Это действительно зависит от ваших требований, которые неЯ не совсем понимаю. Нужно ли, например, каждому LI иметь свое собственное значение для ввода чисел или только одно, которое будет прочитано один раз на странице?
 A.M. D.06 нояб. 2012 г., 16:44
Я бы добавил эти атрибуты в UL и прочитал бы их один раз. Используйте .data или адаптируйте один из примеров getAttribute, чтобы получить это.
 Milo-J06 нояб. 2012 г., 16:41
Извините, я знаю, что был немного неясен, так как сам неясен, как я хочу этого достичь. Глядя на это сейчас, мне нужно только один раз ввести число данных, число завершения данных и сетку данных, чтобы применить их к сценарию. Так есть ли способ сделать это? @AMD
 A.M. D.06 нояб. 2012 г., 16:26
Вы'мне нужно отследить, какой из ваших LI хранил значение, которое вымы назначены. Есть ли причина, по которой у вас есть числовые входы в каждом LI, когда вы (кажется, спрашиваете) только одно значение? @ Оскар Хара
 Milo-J06 нояб. 2012 г., 16:28
Поэтому мне нужно было бы создать отдельную часть для ввода данных числа, числа завершения данных и сетки данных и назначить ее целиком. Это то, что вы имели ввиду? @AMD
 Oscar Jara06 нояб. 2012 г., 17:02
Извините, не имеет смысла, но вы, ребята, действительно должны провести некоторое исследование, вместо того, чтобы спрашивать и делать то, что вы действительно не делаетеПонятия не имею, что именно вам нужно. Все в моем посте, я также включил больше информации, теперь нужно идти @ Milo-J

Не проверенный пример, получить каждый экземпляр *данные-* ввод числа и вставка его в массив:

    var numberInputs = [];  
    var list = document.getElementByID('wordlist');
    var listItems = list.getElementsByTagName('li');
    for(var i = 0;i
 Milo-J06 нояб. 2012 г., 16:07
Так что бы за .... быть в jquery
 A.M. D.06 нояб. 2012 г., 16:24
Вы можете прочитать один LI, используя listItems [3] .getAttribute ('Данные номер-ввод») например. Это зависит от того, какой из них вы хотите использовать. Я предполагал, что вы хотели их всех, поэтому поместите их в массив
 Milo-J06 нояб. 2012 г., 16:18
Мне нравится этот ответ. Проблема в том, что как только я получаю значение из атрибута data, я бы поместил его в переменную @AMD

Ваш ответ на вопрос