-1

javascriptでhtmlの文字列を作成する際に問題が発生しました。それは引用符を間違った場所に置き、率直に言ってそれを行うための非常にエレガントな方法のようには見えません。以下のhtmlを作成するためのよりクリーンな方法はありますか？誰かがこれの例を撃つことができますか？

 $(filterList).append('<li id=\'' + filterItemId  + '\'data-icon=\'delete\'><a onclick=' + '\'removeFilterItem(\'' + filterItemId + '\'' + ')\'>' + name + '</a></li>').listview('refresh');

私は次のようなhtml文字列（上記の変数によって作成された）を作成しようとしています。

<li id="someId" data-icon="delete"><a onclick="removeFilterItem('someId')">Jack</a></li>
4

6 に答える 6

3

両方のタイプの引用符を使用して文字列を作成しても問題はありません。

$(filterList).append("<li id='" + filterItemId  + "' data-icon='delete'><a onclick='removeFilterItem('" + filterItemId + "' \>" + name + "</a></li>").listview('refresh');
于 2012-12-06T15:51:25.573 に答える
1

二重引用符を一重引用符と交換可能に使用して、内部の一重引用符をエスケープする必要をなくすことができます。

$(filterList).append('<li id="' + filterItemId  + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + name + '</a></li>').listview('refresh');
于 2012-12-06T15:52:42.430 に答える
1

JavaScriptでは、一重引用符または二重引用符のいずれかを使用できます。このような場合に通常行うことは、文字列の外側に一重引用符を使用し、内側に二重引用符を使用することです。これを頻繁に行う必要がある場合、特にhtmlがより複雑な場合は、ある種のjsテンプレートソリューションの使用を検討することをお勧めします。

あなたの例では、以下が機能するはずです

$(filterList).append('<li id="' + + filterItemId  + '" data-icon="delete"><a onclick="removeFilterItem(' + filterItemId + ')">' + name + '</a></li>').listview('refresh');
于 2012-12-06T15:54:28.630 に答える
0

文字列を書き込もうとする代わりに、jqueryを使用してプロパティを設定します。このwyaは、文字列のエスケープについて心配する必要はありません。

var $li = $("<li>");
var $a = $("<a>");

$a.appendTo($li);

$li.attr("id", someID);

$a.attr("onclick", "...");

// ...
$(filterList).append($li);

等々。

于 2012-12-06T15:50:58.970 に答える
0

二重引用符を使用して、いくつかの文字列を事前計算することができます。

 var script = "removeFilterItem('" + filterItemId + "');"
 $(filterList).append(
    '<li id="' + filterItemId + '" data-icon="delete">'
    + '<a onclick="'+script+'">' + name + '</a>'
    + '</li>'
 ).listview('refresh');

インデントと分解もタスク（および保守）を容易にすることにも注意してください。

于 2012-12-06T15:52:01.107 に答える
0 
var li = document.createElement("li");
li.id = "someId";
li.setAttribute("data-icon", "delete");
var a = document.createElement("a");
a.onclick = function() { removeFilterItem('someId'); };
li.appendChild(a);

説明することはあまりないと思います。

于 2012-12-06T15:52:25.653 に答える