根據輸入字段值隱藏或顯示div

Question

我正在嘗試根據輸入值隱藏div。 從數據庫中，我生成許多文件，我有一個隱藏的輸入域id=form_type它可以有2個不同的值： typeA和typeB 。 顯示的某些文檔具有值typeA和某些值typeB。

在我的情況下，如果input with id=form_type, class="form-type"具有價值typeA我想隱藏div with id=hide否則如果FORM_TYPE具有價值typeB我不想顯示該分區。

我嘗試了這段代碼，但是僅對id為form_type的第一個輸入form_type ，例如，如果在第一個文檔中value = 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。 第三點是您不能在tbody元素中包含div元素。 僅允許tr 。

為了使事情變得更容易，您可以將整個表和隱藏的輸入包裝在wrapper 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();
});

Answer 2

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

參見規格： http : //www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute