-1

*编辑

我的 HTML 中有一个名为“#wordlist”的列表。在这个列表中，我保存了游戏中的单词、每个单词的附加音频和附加图像。这一切都很好。

因为游戏会有不同的版本，所以我被要求采用一些能够改变要完成的单词量、网格大小等的变量；并将它们作为数据属性放在列表中。（将所有编辑因素集中在一处）。

问题是我无法理解如何为下面的“数字输入”之类的内容输入一个值，以及如何在脚本中更改变量“数字输入”。

这可能吗？

这是列表（data-word、data-audio和data-pic都可以）

<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;"脚本中的变量

4

2 回答 2

2

首先，你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中执行loopor 。.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 执行此操作，这就像 a 的“等价物” 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要从 a 获取属性li并放入变量，只需执行以下操作：

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

但是，如果您想data从 all 中获取所有属性li并将它们放入 variables 或 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();

现场演示：http: //jsfiddle.net/oscarj24/qWyj6/3/

这将是输出：

在此处输入图像描述

并且，例如number-input要从第一个lithis中获取值object，只需执行以下操作：

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

希望这可以帮助 ：-）

于 2012-11-06T15:09:53.677 回答
1

未经测试的示例，获取 * data- *number-input 的每个实例并将其推送到数组中：

    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');
    }
于 2012-11-06T15:03:23.147 回答