基於選擇選項的 JQuery 隱藏/顯示 div

Question

JQuery noob 在這里，我試圖根據多個表單選擇選項使 div 出現/消失。 我的問題是div成功隱藏，但我無法設法在選擇一個選項時讓它們再次恢復。

這是我的 JQuery 代碼

<script type="text/javascript">
    $(document).ready(function () {
        $('#areaFields').hide();
        $('#areaItems').hide();
        $('#areaPartners').hide();
        $('#hidden3').hide();
        $('#items').hide();
        $('#partners').hide();
        $('#fields').hide();
        $('#hidden2').hide();
        $('#block').hide();
        $('#ORDER').hide();
        $('#type').change(function () {
            $('#ORDER').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>

這是我的 HTML

<div class="container">
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Customizing</legend>
            <div class="container">
                <div class="form-group default1">
                    <div class="row">
                        <div class="col">
                            <div id="taille" class="form-group">
                                {{ form.tailleDocX.label }}
                                {{ form.tailleDocX }}
                                {{ form.tailleDocY.label }}
                                {{ form.tailleDocY }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="type" class="form-group">
                                {{ form.type.label }}
                                {{ form.type }}
                            </div>
                        </div>
                        <div class="col">
                            <div id="customer" class="form-group">
                                {{ form.customer.label }}
                                {{ form.customer }}
                            </div>
                        </div>
                    </div>
                </div>

                <div id="ORDER" class="form-group">
                    <hr>
                    <div class="row">
                        <div class="col">
                            <div id="block" class="form-group">
                                {{ form.block.label }}
                                {{ form.block }}
                            </div>
                        </div>
                    </div>

                    <div id="hidden2" class="form-group">
                        <hr>
                        <div class="row">
                            <div class="col">
                                <div id="items" class="form-group">
                                    {{ form.itemsFields.label }}
                                    {{ form.itemsFields }}
                                </div>
                                <div id="partners" class="form-group">
                                    {{ form.partnersFields.label }}
                                    {{ form.partnersFields }}
                                </div>
                                <div id="fields" class="form-group">
                                    {{ form.fields.label }}
                                    {{ form.fields }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="hidden3" class="form-group">
                        <hr>
                        <div class="row">
                            <div class="col">
                                <div id="areaFields" class="form-group">
                                    {{ form.areaFields }}
                                </div>
                                <div id="areaItems" class="form-group">
                                    {{ form.areaItems }}
                                </div>
                                <div id="areaPartners" class="form-group">
                                    {{ form.areaPartners }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group default2">
                        <hr>
                        <div class="row">
                            <div class="col">
                                {{ form.submit }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

要創建表單，我使用 FLASK 中的 WTForm，如果需要，這里是代碼：

class AreaFields(FlaskForm):
    area1 = IntegerField("X0")
    area2 = IntegerField("X1")
    area3 = IntegerField("Y0")
    area4 = IntegerField("Y1")
    textArea = StringField("Texte")


class AreaItems(FlaskForm):
    name = StringField("Name")


class AreaPartners(FlaskForm):
    area1 = IntegerField("X0")
    area2 = IntegerField("X1")
    area3 = IntegerField("Y0")
    area4 = IntegerField("Y1")
    rolePartners = SelectField("Role", id="role")


class AjouterForm(FlaskForm):
    type = SelectField("Type",
                       choices=[("INVOICE", "invoice"), ("ORDER", "order"), ("SERVICE_REQUEST", "service_request")],
                       id="type")
    block = SelectField("Block", choices=[("ITEMS", "items"), ("PARTNERS", "partners"), ("fields", "fields")],
                        id="block")
    itemsFields = SelectField("Champs", id="items")
    partnersFields = SelectField("Champs", id="partnersFields")
    fields = SelectField("Champs", id="fields")
    tailleDocX = IntegerField("Taille X", validators=[DataRequired()])
    tailleDocY = IntegerField("Taille Y", validators=[DataRequired()])
    customer = SelectField("Customer", choices=[("NotFinalData", "NotFinalData")])
    areaFields = FormField(AreaFields)
    areaItems = FormField(AreaItems)
    areaPartners = FormField(AreaPartners)
    submit = SubmitField('Voir le résumer')

目前我想要的是：像我一樣隱藏所有 div，然后在表單中選擇訂單時顯示 div #ORDER，或者如果選擇另一個選項再次隱藏 div，那么我會做同樣的事情對於其他人 select 和 div 一旦我可以設法讓它工作。

謝謝閱讀 ！

編輯 1 ：我管理第一個隱藏/顯示的第一個選擇是form.type ，它包含 3 個選項：INVOICE、ORDER、SERVICE_REQUEST

當我選擇 INVOICE 或 SERVICE_REQUEST 時，一切都必須保持隱藏，因為那些選項暫時還沒有准備好，但是當我選擇 ORDER 時，我希望顯示 div #ORDER 和 #block。 #ORDER 包含特定於 ORDER 選項的所有其他 div，#block 包含另一個選擇，該選擇將使另一個 div 出現/消失取決於所選的選項。

這是一張顯示實際表格而不被隱藏的圖片

第一個選擇是 Type，如果選擇 order，它必須使出現 Block，並且 block make 根據選擇的選項出現 Champs。

編輯 2 ：大新聞，我剛剛發現我的問題是什么，我一開始沒有看到這個，我很愚蠢，我為 div 和 WTForm 選擇使用了相同的 ID ......所以基本上我正在檢查變化對於 div 而不是對於選擇...我現在覺得很愚蠢，謝謝你試圖幫助我！

Answer 1

您只需要隱藏之前顯示的元素。 你的代碼應該是這樣的。

<script type="text/javascript">
    $(document).ready(function () {
        var current_element = '';

        $('#areaFields').hide();
        $('#areaItems').hide();
        $('#areaPartners').hide();
        $('#hidden3').hide();
        $('#items').hide();
        $('#partners').hide();
        $('#fields').hide();
        $('#hidden2').hide();
        $('#block').hide();
        $('#ORDER').hide();
        $('#type').change(function () {

            var id = $(this).val()
            $('#' + id).show();

            // hide previously showed element
            if(current_element != '') $('#' + current_element).hide();

            // store id of previously selected element
            current_element = id
        });
    });
</script>