只显示一个子DIV

Showing just a child DIV

本文关键字：一个 DIV 显示      更新时间：2023-09-26

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

我有以下代码:

<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> 38时，只显示Autor字段。

我试图设置和id为div class="djform_row，不同的id为两个div's，但没有工作。

我该怎么做呢?任何建议吗?

给每个。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/

相关文章：