1

いくつかの要素に CSS を適用していて、それらを display: none; にしています。ユーザーがラジオ ボタンをクリックすると、次のように表示されます。要素から外して表示します。

ただし、jQuery を介してこれらの要素に CSS を適用しています。ページが読み込まれるたびに..幅は適用されません。私は setwidth(1/2) か何かを持っていて、親divの幅を見つけて半分に切り、その幅をそれに設定します。ただし、div全体が表示されないため、ページがロードされるとすぐに、そのjquery関数を取得することさえできません...したがって、幅は0pxです..そして、DIVをロードするたびに..すべて効果があり、基本的には幅 0px の巨大な DIV です。

どうすればこれを行うことができますか？

私がいる場所では、JFiddle としての wifi がフィルタリングされ、アクセスがブロックされました。しかし、ここに私のマークアップがあります:

HTML:

<fieldset id="new_item">
    <legend>New Item</legend>
    <div class="input-row">
        <div class="input-wrap setwidth(1/2)">
            @Html.LabelFor(model => model.ProductDescription, T("Product Description (maximum of 30 characters"))
            @Html.TextBoxFor(model => model.ProductDescription, new { @class = "setwidth(1)", @maxlength = "30" })
        </div>
        <div class="input-wrap setwidth(1/2)">
            @Html.LabelFor(model => model.ProductClass, T("Product Class"))
            @Html.DropDownListFor(model => model.ProductClass, new System.Web.Mvc.SelectList(Model.ProductClasses, "Value", "Key"), new { @class = "setwidth(1)" })
        </div>
    </div>

他にもありますが、ここに私の jQuery と CSS を示します。

<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('#new_item').addClass('hide');
        $('#existing_item').addClass('hide');
        $('#StateOfItem').change(function () {
            //every time value of StateOfItem is changed
            if ($('.new_item').is(':checked')) {
                $('#new_item').removeClass('hide');
                $('#existing_item').addClass('hide');
            }
            else if ($('.existing_item').is(':checked')) {
                $('#new_item').addClass('hide');
                $('#existing_item').removeClass('hide');
            }
        });
    });
</script>
4

2 に答える 2

0

表示プロパティをnoneに設定すると、要素の「スペース」が保持されません。代わりに可視性を使用する必要があります。

$('#myelem').css('visibility','hidden');
$('#myelem').css('visibility','visible');
于 2012-12-04T17:49:00.513 に答える
0

私は常に次のような関数を使用しています：

    function getBlockWidth(block) {
        var oldStyle = block.attr('style');
        block.css({
            'display' : 'block',
            'visibility' : 'hidden',
            'position' : 'absolute'
        });
        var h = block.outerWidth();
        block
            .removeAttr('style')
            .attr('style', oldStyle);
        return h;
    }

使用法：

var someItemWidth = getBlockWidth( $('#new_item') );

jQuery プラグインに書き直すことができますが、ヘルパー オブジェクトのメソッドとして使用しています。

于 2012-12-04T17:55:32.503 に答える