Question

我正在尝试根据一个参数显示/隐藏字段。问题是，有时我想显示两个字段，有时只显示其中一个字段。

我有以下代码：

<div class="djform_row extra_fields">
    <div id="ex_fields" style="display: none;">
        <div class="djform_row">
            <label id="djisbn-lbl" class="label" for="djisbn">ISBN * </label>
            <div class="djform_field">
                <input id="djisbn" class="inputbox required" type="text" value="" name="isbn" required="required" aria-required="true">
                <div id="suggestions"></div>
            </div>
        </div>
        <div class="djform_row">
            <label id="djautor-lbl" class="label" for="djautor">Autor * </label>
            <div class="djform_field">
                <input id="djautor" class="inputbox required" type="text" value="" name="autor" required="required" aria-required="true">
            </div>
        </div>
    </div>
</div>

我根据这样的类别显示它：

if(cat_id > 38){
    document.getElementById('ex_fields').style.display = 'none';
}else{
    document.getElementById('ex_fields').style.display = 'block';
}

但我真正想做的是，当cat_id＆gt; 38，只显示Autor字段。

我尝试为div class =“djform_row设置和id，为两个div设置不同的id，但是没有用。

我该怎么做？有什么建议吗？

Answer 1

给每个.djform_row一个id我认为这是一个很好的解决问题的方法，我在下面给出一些代码：

<div class="djform_row extra_fields">
        <div id="ex_fields" >
            <div id="child1" class="djform_row" style="display: none;">
                <label id="djisbn-lbl" class="label" for="djisbn">ISBN * </label>
                <div class="djform_field">
                    <input id="djisbn" class="inputbox required" type="text" value="" name="isbn" required="required" aria-required="true">
                    <div id="suggestions"></div>
                </div>
            </div>
            <div id="child2" class="djform_row"  style="display: none;">
                <label id="djautor-lbl" class="label" for="djautor">Autor * </label>
                <div class="djform_field">
                    <input id="djautor" class="inputbox required" type="text" value="" name="autor" required="required" aria-required="true">
                </div>
            </div>
        </div>
    </div>

<强>的Javascript

if(cat_id > 38){
    document.getElementById('child2').style.display = 'block';
}else{
    document.getElementById('child1').style.display = 'block';
    document.getElementById('child2').style.display = 'block';
}

我在这里留下 JSFiddle ：http://jsfiddle.net/2xrNT/

只展示一个孩子DIV

1 个答案: