87,977
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html>
<head>
<title>DVD Ambassador — Disc Locator</title>
<link rel="stylesheet" type="text/css" href="dvds.css">
<script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
<script type="text/javascript">
var filterCount = 0;
$(function() {
$('#addFilterButton').click(function(){
var filterItem = $('<div>')
.addClass('filterItem')
.appendTo('#filterPane')
.data('suffix','.' + (filterCount++));
$('div.template.filterChooser')
.children().clone().appendTo(filterItem)
.trigger('adjustName');
});
$('select.filterChooser').live('change',function(){
var filterType = $(':selected',this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier',filterItem).remove();
$('div.template.'+filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]',this).remove();
});
$('button.filterRemover').live('click',function(){
$(this).closest('div.filterItem').remove();
});
$('.filterItem [name]').live('adjustName',function(){
var suffix = $(this).closest('.filterItem').data('suffix');
if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return;
$(this).attr('name',$(this).attr('name')+suffix);
});
$('#addFilterButton').click();
$('#filtersForm').submit(function(){
$('#resultsPane').load('applyFilters',$('#filtersForm').serializeArray());
return false;
});
/* bonus exercise code -- uncomment to enable
$('input.numeric').live('keypress',function(event){
if (event.which < 48 || event.which > 57) return false;
});
*/
});
</script>
</head>
<body>
<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 Filters</button>
</div>
</fieldset>
<div id="resultsPane"><span class="none">No results displayed</span></div>
</form>
</div>
<!-- hidden templates -->
<div id="templates">
<div class="template filterChooser">
<button type="button" class="filterRemover" title="Remove this filter">X</button>
<select name="filter" class="filterChooser" title="Select a property to filter">
<option value="" data-filter-type="" 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"/> <span>through</span>
<input type="text" name="numberRange2" class="numeric"/>
</div>
<div class="template dateRange">
<input type="text" name="dateRange1" class="dateValue"/> <span>through</span>
<input type="text" name="dateRange2" class="dateValue"/>
</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>
</body>
</html>
$('option[value=""]',this).remove();
,似乎“,”前的选择器被限定为“,"后的元素的后代了,这个事情不应该啊,教程不是这样教的
$('.qualifier,'+filterItem).remove();//我觉得应该是这样,不知对不对