使用jQuery将标签插入div [英] Using jQuery to insert labels into divs

问题描述

我有一长串的复选框，其中包含特定标签，看起来像这样:

I have this long list of checkboxes with specific labels that look something like this:

<input type='checkbox' name='check[]' id='159' value='159' />
<label for='159'>Person 1</label>

<input type='checkbox' name='check[]' id='160' value='160' />
<label for='160'>Person 2</label>

在此表格下方，我有六个div，如下所示:

And below this form I have six div's like so:

<div id="member1"></div>
<div id="member2"></div>
<div id="member3"></div>
<div id="member4"></div>
<div id="member5"></div>
<div id="member6"></div>

我有这个JS函数，所以当我单击一个复选框时，它的标签会插入到第一个div中.看起来是这样的:

I have this JS function so that when I click on a checkbox, it's label is inserted into the first div. Here's what it looks like:

$(function(){
    $('input:checkbox').click(function(){
        var id = $(this).attr('id');
        if($(this).is(':checked')){
            $('#member1').text($('label[for="'+ id +'"]').text());
        }
        else{
            $('#member1').text('');   
        }
    });
});

所以一个问题是该函数当前必须指定将哪个div放入(#member1).可以正常工作的是，当第一个div为满"时，下一个复选框将其标签插入第二个div，而当第一个复选框为满时，第三个复选框会将其标签插入第三个div，依此类推.

So one problem is the function currently has to specify which div to put it into (#member1). It's supposed to work that when the first div is "full", the next checkbox will insert its label into the second div, and when that one is full, the third checkbox will insert its label into the third div, etc.

另一个问题是，如果未选中该复选框，则应从其div中删除其标签，并且其下方的div中的标签应向上移动.有人知道这是否可能吗?无论哪种问题，我都会接受帮助！

The other issue is if a checkbox becomes unchecked, its label should be removed from its div and the labels in the divs below it should move up. Anyone know if that's possible? I'll accept help for either problem!

推荐答案

注意:我会完全不同.

但是使用您当前的结构:实时复制 | 源(使用有效的id s)

But using your current structure: Live copy | source (using valid ids)

$(function(){
    $('input:checkbox').click(function(){
        var $cb = $(this),
            id  = this.id, // No need for `attr`
            member,
            prev;
        if(this.checked){  // No need for `attr`
            $("div[id^=member]").each(function() {
                if (!this.firstChild) {
                    // It's empty, use it
                    $(this).text($('label[for="'+ id +'"]').text()).attr("data-contents", id);
                    return false; // Done
                }
            });
        }
        else {
            member = $('div[data-contents="' + id + '"]');
            if (member[0]) {
                member.empty().removeAttr('data-contents');
                prev = member[0];
                member.nextAll().each(function() {
                   if (!this.firstChild) {
                       return false; // Done
                   }
                   prev.appendChild(this.firstChild);
                   prev = this;
                });
            }
        }
    });
});

我要进行的最小更改:

• 将#memberX div放入容器中，因此我们不必进行id^=搜索.
• 根本不在#memberX div上使用id值.
• 如果您绝对不是他们，肯定需要它们，那么根本就没有空的#member div.这样可以显着简化代码.
• 如果您需要它们，请在清除时删除div，然后在末尾附加一个新的空白.

• Put the #memberX divs in a container so we don't have to do the id^= search.
• Don't use id values on the #memberX divs at all.
• If you don't absolutely, positively need them, don't have empty #member divs at all. This would simplify the code markedly.
• If you do need them, when clearing, remove the div and just append a new, empty one to the end.

示例:实时复制 | 源

HTML:

只需将#membersX div替换为<div id="members"></div>".

Just replace the #membersX divs with <div id="members"></div>".

JavaScript:

JavaScript:

$(function(){
    $('input:checkbox').click(function(){
        var $cb = $(this),
            id  = this.id; // No need for `attr`

        if(this.checked){  // No need for `attr`
            $("<div>")
                .text($('label[for="'+ id +'"]').text())
                .attr("data-contents", id)
                .appendTo("#members");
        }
        else {
            $('div[data-contents="' + id + '"]').remove();
        }
    });
});

您可以通过将复选框 input 移至label来进一步简化操作(这也意味着您可以取消使用for属性):源

You can simplify even more by moving the checkbox input the labels (which also means you can do away with the for attribute): Live copy | source

HTML:

<label><input type='checkbox' name='check[]' id="x159" value='159' />
  Person 1</label>
<label><input type='checkbox' name='check[]' id="x160" value='160' />
  Person 2</label>
<div id="members"></div>

JavaScript:

JavaScript:

$(function(){
    $('input:checkbox').click(function(){
        var id  = this.id; // No need for `attr`

        if(this.checked){  // No need for `attr`
            $("<div>")
                .text($(this.parentNode).text())
                .attr("data-contents", id)
                .appendTo("#members");
        }
        else {
            $('div[data-contents="' + id + '"]').remove();
        }
    });
});

这篇关于使用jQuery将标签插入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！