-1

*編集

HTMLに「#wordlist」というリストがあります。このリストでは、ゲーム内の単語、各単語に添付された音声と添付画像を保持しています。これはすべて正常に機能します。

ゲームにはさまざまなバージョンがあるため、完了する単語の量、グリッドのサイズなどを変更できる変数のいくつかを使用するように求められました。それらをデータ属性としてリストに配置します。（すべての編集要素を1か所で利用できるようにします）。

問題は、以下の「number-input」のような値を入力する方法と、スクリプトの変数「numberInput」を変更する方法について頭を悩ませることができないことです。

これは可能ですか？

これがリストです（data-word、data-audio、data-picはすべて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>

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属性に新しい値を割り当てるには、以下を使用します。この場合、私は最初に影響を与えましたが、それらすべてを変更したい場合は、jQueryでまたはliを実行できます。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を使用してこれを行うだけで、これは：の「同等」のようなものです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/

これが出力になります：

ここに画像の説明を入力してください

そして、たとえばこれnumber-inputの最初から値を取得するには、次のようにします。liobject

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 に答える