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

问题描述

*编辑

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

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

问题是我无法理解我要如何输入值在这个脚本中改变变量numberInput。

这可能吗？

以下是清单（data-word，data-audio和data-pic都是OK）

 < ul id =wordlist> 
< li data-audio =data-pic =images / one.pngdata-word =onedata-number-input =data-completion-numberdata-grid =  >< /锂> 
< li data-audio =data-pic =images / two.pngdata-word =twodata-number-input =data-completion-numberdata-grid =  >< /锂> 
 
< li data-audio =data-pic =images / four.pngdata-word =fourdata-number-input =data-completion-numberdata-grid =  >< /锂> 
 
 
 
 
 
 data-audio =data-word =images / ten.pngdata-word =tendata-number-input =data-completion-numberdata-grid =  >< /锂> 
< / 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;

解决首先，你的 html 根本不好，你必须把它改为：

（ data 属性已更正...）

HTML：

 < ul id =wordlist> 
< li data-audio =data-pic =images / one.pngdata-word =onedata-number-input =data-completion-number =data-grid =>< / li> 
< li data-audio =data-pic =images / two.pngdata-word =twodata-number-input =data-completion-number = data-grid =>< / li> 
< li data-audio =data-pic =images / three.pngdata-word =three data-completion-number =data-grid =>< / li> 
< li data-audio =data-pic =images / four.pngdata-word = fourdata-number-input =data-completion-number =data-grid =>< / li> 
< li data-audio =data-pic =images / five.pngdata-word =fivedata-number-input =data-completion-number =data-grid =  >< /锂> 
< li data-audio =data-pic =images / six.pngdata-word =sixdata-number-input =data-completion-number =data-grid =  >< /锂> 
< li data-audio =data-pic =images / seven.pngdata-word =sevendata-number-input =data-completion-number =data-grid =  >< /锂> 
 
  
  

然后，将新值赋给 data 属性，请使用以下内容。在这种情况下，我只是影响了第一个 li ，但您可以执行循环或 .map （），如果你想改变它们全部。

活DEMO：

jQuery代码：

  var numberInput = 2; 
 var completionNumber = 2; 
 var smallGrid = {
 x：4，
 y：4 
}; 
 
 //在这种情况下，这只会影响'ul'中的第一个'li'，这就是为什么使用.eq（0）的原因。 
 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）; 
 
 //在控制台中打印新的'data'属性以查看它们是否已更改。 
 console.log（elem.data（'number-input'））; 
 console.log（elem.data（'completion-number'））; 
 console.log（elem.data（'grid'））; 
  

---

更改所有 li 属性：

只需使用jQuery执行此操作，就像 loop ：

直播DEMO：

（In

  $（'ul＃wordlist li'）。map（函数（i，v）{
 $（this）.data（'number-input'，numberInput.toString（））; 
 $（this）.data（'completion-number'，completionNumber。 toString（））; 
 $（this）.data（'grid'，smallGrid.x +'，'+ smallGrid.y）; 
}）; 
  

---

如果您想获取数据 li 中添加c $ c>属性并放入一个变量，只需执行以下操作：

  //获取'数字输入'属性f rom首先'li'：
 var numberInput = $（'ul＃wordlist li'）。eq（0）.data（'number-input'）; 
  

---

但是，如果您想获得所有数据属性从所有 li 放入变量或javascript object ，就这样做：

  var data = $（'ul＃wordlist li'）。map （function（i，v）{
 
 var numberInput = $（this）.data（'number-input'）; 
 var completionNumber = $（this）.data（'completion-数字'）; 
 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（）; 
  

直播DEMO：

将是输出：

例如，为了得到第一个 li 的数字输入 / code>这个对象，就这样做：



 的console.log（数据[0] .numberInput）; 
  





---

希望这有助于： - ）

*EDIT

I have a list in my HTML called "#wordlist". In this list I hold the words in my game, the attached audio and the attached image to each word. This all works fine.

Because there will be different versions of the game, I have been asked to take some of the variables capable of changing the amount of words to complete, size of the grid etc; and place them as data-attributes in the list. (Making all the editing factors available in one place).

The problem is I can't get my head around how I am going to type a value in for something like "number-input" below and that changing the variable "numberInput" in the script.

Is this possible to do?

Here is the list (data-word, data-audio and data-pic are all OK)

<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>

Here are the variable that I need to change through the data-attributes in the HTML

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

So basically So if "data-number-input="2" this would make the variable "numberInput = 2;" in the script

解决方案

First of all, your html wasn't good at all, you must change it to this:

(data attributes were corrected...)

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>​

Then, to assign new values to the data attributes, use the following. In this case I just affected the first li but you can do a loop or .map() in jQuery if you want to change all of them.

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

jQuery code:

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

---

Changing all li attributes:

just do this using jQuery, this is like the "equivalent" of a loop:

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

(In live demo check browser's console to see the output)

$('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);
});​

---

If you want to get the data attribute from a li and put in a variable, just do this:

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

---

But, If you want to get all data attributes from all li and put them in variables or javascript object, just do this:

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/

This will be the output:

And, to get for example the number-input value from the first li of this object, just do this:

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

---

Hope this helps :-)

这篇关于从HTML数据属性中采用变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！