Question

我正在尝试根据输入值隐藏div。从数据库中，我生成了许多文档，我有一个隐藏的输入字段id=form_type，可以有两个不同的值：typeA和typeB。显示的文档具有值类型A和某些值类型B。

在我的情况下如果input with id=form_type, class="form-type"具有值typeA我想隐藏div with id=hide如果form_type具有值typeB我不希望显示该div。< / p>

我尝试了这段代码，但它只对id为form_type的第一个输入才有价值，例如，如果在第一个文档值= typeA中，它就像所有文档一样，即使在其他文档中值也可以不同：

   var hide_fiels = $('.form-type').attr("value");           
        if (hide_fiels == "typeA"){ 
            $('#hide').css('display','none');
        }
        else{ 
            $('#hide').css('display','block');
        }

我的HTML代码看起来像这样：

{% if doc_report_all.results %}
{% for doc_report in doc_report_all.results%}
    <table align="center" class="table table-striped " >
    <input type="hidden"  class="form-type" id="form_type" value="{{ doc_report.form_type }}">
    <tbody> 
    <tr> <td>  //code </td></tr>
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    <div id="hide" style="display: none;"> 
    <tr> <td> //code </td></tr>
    <tr> <td> //code </td></tr>
    </div>
    </body                            

{% endfor %}
{% endif %}

Answer 1

最重要的是，在处理多个表单时，您应该使用classes而不是ids，否则元素将具有相同的id。此外，您应该将hidden input移到table元素之外，因为这不是有效的HTML。第3点是div元素中不能包含tbody元素。只允许tr。

为了简化操作，您可以将整个表和隐藏的输入包装在包装器div中，以便更容易地进行循环。

然后你的HTML应该是这样的：

{% if doc_report_all.results %}
{% for doc_report in doc_report_all.results%}
<div class="form">
    <input type="hidden" class="form_type" value="{{ doc_report.form_type }}">
    <table align="center" class="table table-striped " >
        <tbody> 
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
            <tr class="toggle" style="display: none;"> <td> </td></tr>
        </tbody>
    </table>
</div>
{% endfor %}
{% endif %}

你的JavaScript可能是这样的：

$(".form").each(function()
{
    if ($(this).find(".form_type").val() == "typeA")
        $(this).find(".toggle").hide();
    else
        $(this).find(".toggle").show();
});

根据输入字段值隐藏或显示div

1 个答案: