0

それは質問のタイトルとしてはそれほど素晴らしいものではないので、誰かがそれを読んだ後にそれを言葉にするより良い方法を持っているなら、それはありがたいです。

邪魔にならない開示、これは宿題です。今週の課題は、既存のプレーンJSコードをリファクタリングしてJQMを使用することです。変換に問題があり、よくわかりません。コードは次のとおりです。

function populateItemLinks(key, listItem)
{

    var ecLink = $('<a class="padRightRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Edit Character");
            ecLink.on("click", editCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));

        ecLink = $('<a class="padLeftRed"></a>');
            ecLink.attr("href", "#");
            ecLink.attr("key", key);
            ecLink.html("Delete Character");
            ecLink.on("click", deleteCharacter);
            ecLink.appendTo(listItem);

            console.log(ecLink.attr("key"));
};

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
            console.log(this.key);
        alert("Character was deleted.");
        localStorage.removeItem(this.key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

問題は、populateItemLinks関数のリンクの反復として.key属性を使用することです。それが海峡のJavaScriptだったとき、私はlinkname.key=key;を実行することができました。次に、「this.key」を使用してdeleteCharacter関数でキーを取得します。さて、今では常に未定義が返され、JQM以外のバージョンと同じ機能を取得するために複雑にならない方法は考えられないので、助けていただければ幸いです。

4

2 に答える 2

1

コードが未定義を返す理由は、DOM要素のプロパティを読み取ろうとしているが、DOM要素の属性を設定しているためです。

この質問の上位の回答は、2つの違いを説明しています：.prop（）と.attr（）

新しく作成したDOM要素のプロパティを次のように設定する場合：

ecLink.prop('key', 12355);

そして、DOM要素に直接アクセスし続けました（jQuery経由ではありません）：

this.key; // 123455

すべてが順調だったでしょう。これをさらに詳細に示すJSFiddleの例を次に示します。

とにかく、設定している属性で機能するようにコードを調整しました。

function deleteCharacter()
{
    var toDelete = confirm("Do you wish to delete this character?");

    if (toDelete)
    {
        var key = $(this).attr('key');
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}

以上のことをすべて述べた上で、データ属性は、DOM要素に対して任意のデータを格納するのに適しています。

ecLink.data('key', myKey); // set
ecLink.data('key');        // get
于 2012-10-25T03:26:57.110 に答える
0

私がすることは、これecLinkを好きにするための引数としてクリックされたものを渡すことですdeleteCharacter()：

ecLink.on("click",function() { deleteCharacter($(this)); });

次に、変更できますdeleteCharacter()：

function deleteCharacter(el)
{
    var toDelete = confirm("Do you wish to delete this character?");
    if (toDelete)
    {
        var key = el.attr('key'); //get the key attribute
        console.log(key);
        alert("Character was deleted.");
        localStorage.removeItem(key);
        $.mobile.changePage("#home");
    }
    else
    {
        alert("Character was not deleted.");
    }
}
于 2012-10-25T03:28:08.437 に答える