使用 javascript 数组显示特定的 HTML div

Question

Using django I have a HTML page with a table containing checkboxes:

{% for o in obj %}

    <input class='germ_ids' name='{{o.id}}'>

{% endfor %}


<script>

    var elements = document.getElementsByClassName("germ_ids");
    var ids = [];
    for(var i=0; i<elements.length; i++) {
    ids.push(elements[i].name);
    }


</script>

This has given me an array of specific 'germ ids'. These relate to other django objects I have:

the same.html page:

{% for k, v in add_state_dict.items %}

    <div class='{{k.id}}_statement'>
        <p>{{v}}</p>
    </div>

{% endfor %}

<div class='all_germ'>
  <p>{{additional_statement}}</p>
</div>

What I want to achieve is a statement for each germ_id when their checkbox is checked. However when more than one boxes are checked, it makes a concat statement called additional_statement in the 'all_germ' class.

I have hard coded it in in a JSFiddle http://jsfiddle.net/sDsCM/1037/

However I want to use the elements in the array to do this to account for different array values.

Answer 1

You should not be using class names with IDs but instead use class names that categorize your checkboxes. As example I'll be using .checkbox-plus-info . Also, use a data attribute to find the associated statement (unless you can render them inside one div):

{% for o in obj %}
    <input class='germ_ids checkbox-plus-info' name='{{o.id}}'
        data-info-tag="info-{{o.id}}">
{% endfor %}

{% for k, v in add_state_dict.items %}

    <div id='{{k.id}}_statement' class="info info-{{k.obj_id}}">
        <p>{{v}}</p>
    </div>

{% endfor %}

In the above, k of course needs to contain a reference to the object (its PK/ID). You should have that information in your view and add it to the context. You haven't posted your view/context code but the business logic should mostly be ready while you create the template context, so prepare as much as you can there.

In your JS:

$(".checkbox-plus-info").click(function() {
  $(".info").hide(); // hide all
  stmtElId = $(this).target.data("info-tag");
  $("#" + stmtElId).show();
  // check whether something has to be shown when several checkboxes are checked
  // e.g. count whether all checkboxes are checked, or other logic
});