1

最初のスライダーの幅を 20%、2 番目のスライダーの幅を 75% に設定しようとしています

http://jsfiddle.net/kE8GJ/5/

何かが足りないようです。

4

1 に答える 1

2

問題は、生成されたコードを見ると、jQuery が生成されたマークアップを次のように HTML に自動的に挿入することです。

<div data-role="content" class="ui-content" role="main" style="
    width: 300px;
    background: blue;
">
        <h2> List </h2>
            <select data-theme="b" data-mini="true" name="slider2" id="flip-a2" data-role="slider" onchange="" class="ui-slider-switch">
                <option value="3">something</option>
                <option value="0">name</option>
            </select><div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-slider-mini" style=""><span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%; ">name</span><span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%; ">something</span><div class="ui-slider-inneroffset"><a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-slider-handle-snapping ui-btn-up-b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="name" title="name" aria-labelledby="flip-a2-label" style="left: 100%; "><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></div>

            <select data-theme="e" data-mini="true" name="slider" id="flip-a" data-role="slider" onchange="" class="ui-slider-switch">
                <option value="3">gkhkj</option>
                <option value="0">ok</option>
            </select><div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-slider-mini" style=""><span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%; ">ok</span><span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%; ">gkhkj</span><div class="ui-slider-inneroffset"><a href="#" class="ui-slider-handle ui-btn ui-btn-up-e ui-shadow ui-btn-corner-all ui-slider-handle-snapping" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="e" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="ok" title="ok" aria-labelledby="flip-a-label" style="left: 100%; "><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></div> 
    </div>

したがって、両方の「偶数」セレクターがヒットしていました。「:nth-child(4n+2)」と「:nth-child(4n+4)」を使用して正しいパターンを選択することもできますが、その時点でマークアップを CSS に緊密に結合しているため、不要な場合があります。それをするために。

トップのH2を説明する特定の例にJSフィドルを追加しましたhttp://jsfiddle.net/kE8GJ/10/

于 2012-07-22T23:24:38.920 に答える