Question

*编辑

我的HTML中有一个名为“#wordlist”的列表。在这个列表中，我将游戏中的单词，附加的音频和附加的图像保存到每个单词中。一切正常。

因为会有不同版本的游戏，我被要求采取一些能够改变单词数量，网格大小等的变量;并将它们作为数据属性放在列表中。（使所有编辑因素在一个地方可用）。

问题是我无法理解我将如何为下面的“数字输入”键入值以及更改脚本中的变量“numberInput”。

这可能吗？

这是列表（数据字，数据音频和数据图片都可以）

<ul id="wordlist">
        <li data-audio="" data-pic="images/one.png" data-word="one" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/two.png" data-word="two" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/three.png" data-word="three" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/four.png" data-word="four" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/five.png" data-word="five" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/six.png" data-word="six" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/seven.png" data-word="seven" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/eight.png" data-word="eight" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/nine.png" data-word="nine" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/ten.png" data-word="ten" data-number-input="" data-completion-number"" data-grid=""></li>
</ul>

以下是我需要通过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;"

Answer 1

首先，您的html一点也不好，您必须将其更改为：

（data属性已更正...）

<强> HTML：

<ul id="wordlist">
        <li data-audio="" data-pic="images/one.png" data-word="one" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/two.png" data-word="two" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/three.png" data-word="three" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/four.png" data-word="four" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/five.png" data-word="five" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/six.png" data-word="six" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/seven.png" data-word="seven" data-number-input="" data-completion-number="" data-grid=""></li>
        <li data-audio="" data-pic="images/eight.png" data-word="eight" data-number-input="" data-completion-number="" data-grid=""></li>
</ul>

然后，要为data属性分配新值，请使用以下命令。在这种情况下，我刚刚影响了第一个li，但如果您想要更改所有这些内容，可以在jQuery中执行loop或.map()。

直播演示： 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执行此操作，这就像＆＃34;等效的＆＃34;一个loop：

直播演示： 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属性并将其置于变量或javascript object中，请执行以下操作：

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();

直播演示： http://jsfiddle.net/oscarj24/qWyj6/3/

这将是输出：

enter image description here

并且，要获得此number-input的第一个li中的object值，请执行以下操作：

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

希望这会有所帮助： - ）

Answer 2

未经测试的示例，获取* 数据的每个实例 - *数字输入并将其推送到数组中：

    var numberInputs = [];  
    var list = document.getElementByID('wordlist');
    var listItems = list.getElementsByTagName('li');
    for(var i = 0;i<listItems.length;i++) {
      numberInputs.push = listItems[i].getAttribute('data-number-input');
    }

从HTML数据属性中采用变量值

2 个答案: