1

リストビュー内でリスト項目を動的に生成します (onclick)。ここで私のコードを表示できます: jsfiddle

jsfiddle リンクにコードを添付する必要があるため、次のようになります。

HTML

<div data-role="fieldcontain">Select option:
    <br>
    <select name="prodselect" id="prodselect">
        <option data-foo="xxx">first</option>
        <option data-foo="yyy" selected="selected">Second</option>
    </select>
    <input type="button" name="appeprod" id="appeprod" value="Add option" data-icon="add" data-inline="true" />
</div>
<ul name="listaproduse" id="listaproduse" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
    <li data-role="list-divider">
         <h3 class="ui-li-heading">Selected options</h3>
 <span class="ui-li-count">5</span> 
    </li>
    <li id="produsele" name="produsele"></li>
</ul>

と jscript

$('#appeprod').click(function() {
    var option = $('#prodselect').val();
    var box = document.getElementById('prodselect');
    var option2 = box.options[box.selectedIndex].text;
    $('#listaproduse').append('<li><h3>'+option2+'<h3><p>'+option+'</p><p>Some comment:</p></li>');
    $('#listaproduse').listview("refresh");
});

私の問題は（jsfiddleでわかるように）H3タグのコンテンツが次の段落と重なっているということです。

動的リストビューの下に追加された jsfiddle を更新しました。これは、動的リストビューで生成したいのと同じコンテンツを持つ静的リストビューです。動的なものが重なっている間、静的なものはきれいに見えます。私に何ができる？どうすればこれを回避できますか?

4

2 に答える 2

2

<h3>JS コードで を適切に閉じていません。次のようにする必要があります。<h3>'+option2+'</h3>

于 2013-07-10T23:30:04.073 に答える
0

これをスタイルに追加する必要があります。その要素に追加されたスタイリングを調べたところ、margin-top が -0.5em であることがわかりました。

CSS

.ui-li-desc
{
 margin-top: 0;
}
于 2013-07-10T23:37:28.877 に答える