Question

我试图在网站上做标签过滤功能。从一个div转移到另一个div工作。但转回它并不起作用。

这是我的HTML：

<h4>Video Tags</h4>
<div id="tagbox-1">
     <span class="tag-filter">tag 1</span>
     <span class="tag-filter">tag 2</span>
     <span class="tag-filter">tag 3</span>
</div>
<h4>Video Filters</h4>
<div id="tagfilter-1">
</div>

然后这是我的javascript / jquery：

function tag_ui_move(tag_object,filter_move_to){
    $(filter_move_to).append($(tag_object)).fadeIn();
    $(tag_object).remove();
}
$(document).ready(function(){
    var stored_tag = [];
    $('[id^="tagbox-"] > span').each(function(){
        $(this).click(function(){
            tag_ui_move(this,'div[id^="tagfilter-"]');
        });
    });

    $('div[id^="tagfilter-"] > span').each(function(){
        $(this).click(function(){
            tag_ui_move(this,'div[id^="tagbox-"]');
        });
    });
});

这几乎是我的HTML和代码的要点。我简化了它，因为有更多的tagbox和tagfilter-div。

Answer 1

问题是$('[id^="tagbox-"] > span')选择当时标记框中存在的所有标记范围元素，然后将点击处理程序绑定到每个将其移动到过滤div。然后$('div[id^="tagfilter-"] > span')选择当时过滤器div 中存在的所有标记范围元素和没有任何内容。所以没有处理程序绑定将元素移回。

此外，不需要使用.each()循环将.click()单独绑定到循环中的每个元素：您可以直接调用.click()并将处理程序绑定到所有与您的选择器匹配的元素。

解决方案是使用委托处理程序，您可以使用.on()将单击绑定到父div元素，但提供jQuery将在单击事件发生时自动测试的辅助选择器：

function tag_ui_move(tag_object,filter_move_to){
    $(filter_move_to).append(tag_object).fadeIn();
    //$(tag_object).remove();  <-- commented out: don't remove the element,
                                 // because append *moves* it
}
$(document).ready(function(){
    var stored_tag = [];
    $('[id^="tagbox-"]').on('click', 'span.tag-filter', function(){
            tag_ui_move(this,'div[id^="tagfilter-"]');
    });

    $('div[id^="tagfilter-"]').on('click', 'span', function(){
        tag_ui_move(this,'div[id^="tagbox-"]');
    });
});

这样，当点击'[id^="tagbox-"]'中的任何元素时，jQuery会测试目标元素是否与选择器'span.tag-filter'匹配，并且当且仅当它与调用您的处理函数时相同。因此，即使他们在两个父div之间来回动态移动，点击也会对元素起作用。

演示：http://jsfiddle.net/6m4aac3k/

Answer 2

HTML

<h4>Video Tags</h4>
<div id="tagbox">
     <span class="tag-filter">tag 1</span>
     <span class="tag-filter">tag 2</span>
     <span class="tag-filter">tag 3</span>
</div>
<h4>Video Filters</h4>
<div id="tagfilter">
</div>

的Javascript

function tag_ui_move(tag_object,filter_move_to){
    $(filter_move_to).append($(tag_object)).fadeIn();
}
$(document).ready(function(){
    $(".tag-filter").click(function(){
        var  inTagBox=$(this).parent( "#tagbox" ).length>0;
        var moveTo=inTagBox ? '#tagfilter' : '#tagbox';
        tag_ui_move(this,moveTo);
    });
});

的jsfiddle

Tag filter

javascript传输和元素从1 div到另一个

2 个答案: