1

私は次のコードを書いています

$(xml).find('list').each(function() {
  $("#content_groups ul").append("<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>");
});
$("#content_groups ul").listview('refresh');

結果は私が望んだものではありません。つまり、チェックボックスには jquery css スタイルがまったくありません。何が問題なのか教えてください。

結果は次のようになります。

私は基本的にjquery/javascriptのすべてに不慣れで、プロジェクトでxmlからの結果を表示するためだけに必要です。

4

2 に答える 2

1

手元の問題を解決するのに十分な情報はありませんが、現在の方法ではDOMがクリーンな方法で実装されていないことを説明したいと思います。

すべての新しいhtmlを一緒にvarに追加し、最後に新しく作成したhtmlを追加することをお勧めします。

var content_groups;
$(xml).find('list').each(function() {
  content_groups += "<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>";
});
$("#content_groups ul").append(content_groups);
$("#content_groups ul").listview('refresh');

これで問題が本当に解決するわけではありませんが、InternetExplorerでサイトがフリーズしているように見える時間が短縮されるはずです。

于 2013-01-22T16:06:24.977 に答える
1

最初に考慮すべき点がいくつかあります。

$("#content_groups ul").listview('refresh');

リストビューのスタイルを設定するだけで、それ以上のスタイルはありません。

チェック ボックスのスタイルを設定するには、次のような適切な関数を使用する必要があります。

$("#checkbox-mini-0").checkboxradio('refresh');

残念ながら、jQuery Mobile は通常のチェック ボックス要素のスタイルを設定できないため、これは役に立ちません。標準のチェック ボックスを使用すると、最終的な結果は通常のチェック ボックスになります。

jQuery Mobile チェック ボックスは次のようになります。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
            <legend>Agree to the terms:</legend>
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
            <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

このコードを使用して、リストビューの li 要素に挿入できます (もちろん、.checkboxradio('refresh');でスタイルを設定する必要があります) が、jQuery Mobile のチェック ボックスが意図されていないため、これはまだ役に立ちません。 bu リストビュー内で使用されます。

ただし、リストビュー内にカスタムチェックボックスを作成できます。これを行う方法の例を次に示します: https://stackoverflow.com/a/13634738/1848600

于 2013-01-22T16:19:35.087 に答える