JQuery：每个（函数（）{}）中的$（this）.show（）不起作用？

Question

我正在学习来自Bear Bibeault等人的JQuery in Action的jquery。

我正在使用Bear Bibeault等人的“JQuery in Action”一书学习jquery。我正在尝试创建DVD高级搜索页面，在该页面上单击“应用过滤器”按钮，出现选择迷你表单帮助您搜索。

基本上它克隆了div＃templates并将它放在div＃下的一个新div中，如果需要，还可以选择一个按钮删除它。 selection.filterChooser保持可见，并且在更改时应该显示正确的div模板。我无法让这个工作

我之前问了一个关于这个项目的问题，但我无法理解这个最后一部分：

当我在Chrome中测试时，jsfiddle似乎陷入困境。代码不会引发任何错误。

jquery的：

$(function() {
    $('div#templates').hide();
    $('#addFilterButton').click(function(event) {
        var uniq = Math.random().toString(36).substr(0,10);
        var nnew = $('<div id="div'+uniq+'" class="selected"></div>');
        var button = $('<button type="button" class="filterRemover" title="Remove this filter">X</button>');
        button.click(function(event) {
            $(this).parent('div.selected').remove();
        });
        nnew.append(button);
        var add = $('div#templates').clone().addClass('container'+uniq).show();
        nnew.append(add);
        $('div#selected-filters').append(nnew);
        var f = /filterChooser/;
        $(add).children().each(function(){
            if(f.exec($(this).attr('class'))) { $(this).show(); }
            else { $(this).hide(); }
            $(this).addClass('input'+uniq);
            var tmp = $(this).attr('name');
            $(this).attr('name',tmp+uniq);
        });
        $('div[class*='+uniq+'][class*=filterChooser] > select[class=filterChooser]')
        .change(function(event) {
            alert("yes its caught");
            $('div[class*='+uniq+']').children().show();
            $('div[class*='+uniq+']').children().each(function(){
                if(f.exec($(this).attr('class'))) { $(this).show(); }
                else { $(this).hide(); }
            });
            var val = $(this).attr('value');
            alert("val: "+val);
            var proper = "";
            $('div[class*='+uniq+'][class*=filterChooser] > select[class=filterChooser] > option').each(function() {
                var tmp = $(this).attr('value');
                if(val == tmp) { 
                    proper = $(this).attr('data-filter-type');
                    alert("Yes its found: "+proper);
                }
            });
            $('div[class*=template][class*='+uniq+']').each(function() {
                alert($(this).attr('class'));
                var classes = $(this).attr('class').split(' ');
                alert("class: "+$(this).attr('class')+", classes[1]: "+classes[1]+", proper: "+proper);
                if(classes[1] == proper) { alert("returning true"); $(this).show(); }
            });
        });
    });
});

正如你所看到的那样，alert()到处都是if(classes[1] == proper) { alert("returning true"); $(this).show(); }，而且它们似乎应该被触发，所以问题似乎是最后一行：<fieldset id="field"> <legend>Use this form to do an advanced search for DVDs</legend> <div id="selected-filters" class="selected"> </div> <div id="templates"> <div class="template filterChooser"> <select name="filter" class="filterChooser" title="Select a property to filter"> <option value="none" data-filter-type="none" selected="selected">-- choose a filter --</option> <option value="title" data-filter-type="stringMatch">DVD Title</option> <option value="category" data-filter-type="stringMatch">Category</option> <option value="binder" data-filter-type="numberRange">Binder</option> <option value="release" data-filter-type="dateRange">Release Date</option> <option value="viewed" data-filter-type="boolean">Viewed?</option> </select> </div> <div class="template stringMatch"> <select name="stringMatchType"> <option value="*">contains</option> <option value="^">starts with</option> <option value="$">ends with</option> <option value="=">is exactly</option> </select> <input type="text" name="term" /> </div> <div class="template numberRange"> <input type="text" name="numberRange1" class="numeric" size="3" /> <span>through</span> <input type="text" name="numberRange2" class="numeric" size="3" /> </div> <div class="template dateRange"> <input type="text" name="dateRange1" class="dateValue" size="11" /> <span>through</span> <input type="text" name="dateRange2" class="dateValue" size="11" /> </div> <div class="template boolean"> <input type="radio" name="booleanFilter" value="true" checked="checked" /> <span>yes</span> <input type="radio" name="booleanFilter" value="false" /> <span>no</span> </div> </div> <div id="pageContent"> <h1>DVD Ambassador</h1> <h2>Disc Locator</h2> <form id="filtersForm" action="/fetchFilteredResults" method="post"> <fieldset id="filtersPane"> <legend>Filters</legend> <div id="filterPane"></div> <div class="buttonBar"> <button type="button" id="addFilterButton">Add Filter</button> <button type="submit" id="applyFilterButton">Apply Filter</button> </div> </fieldset> <div id="resultsPane"> <span class="none">No results displayed</span> </div> </form> </div> </fieldset>

我不明白为什么$（this）.show（）不起作用。

HTML：

{{1}}