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

I'm trying to hide a div based on the input value. From the database, I generate many documents, I have a hidden input field with id=form_type which can have 2 different values: typeA and typeB. Documents that are displayed some have value typeA and some value typeB.

我试图根据输入值隐藏div。从数据库中,我生成了许多文档,我有一个id = form_type的隐藏输入字段,它可以有两个不同的值:typeA和typeB。显示的文档有一些值为typeA,一些值为typeB。

In my case if input with id=form_type, class="form-type" have value typeA I want to hide div with id=hide else if form_type have value typeB I don't want that div to be displayed.

在我的情况下,如果输入id = form_type,class =“form-type”具有值typeA我想隐藏div与id = hide else如果form_type具有值typeB我不希望显示div。

I tried this code but it only takes value only for the first input with id form_type , for example if in first document value=typeA , it takes for all documents like that even that in other documents value can be different:

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

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

My html code looks something like this:

我的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 %}

2 个解决方案

#1

The most important thing is you should make use of classes instead of ids when handling multiple forms where elements would otherwise have the same id. Also, you should move your hidden input outside of the table element, since this is not considered valid HTML. Point 3 is you cannot have a div element inside a tbody element. Only tr is allowed.

最重要的是,在处理多个表单时,应该使用类而不是id,否则元素将具有相同的id。此外,您应该将隐藏的输入移动到表元素之外,因为这不被视为有效的HTML。第3点是你不能在tbody元素中有一个div元素。只允许tr。

To make things easier you can wrap the whole table and hidden input inside a wrapper div for easier looping.

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

Then your HTML should look something like this:

然后你的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 %}

And your JavaScript could be like this:

你的JavaScript可能是这样的:

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

#2

You can’t have multiple elements with the same id.

您不能拥有具有相同ID的多个元素。

See spec: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

请参阅规范:http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

#1