سوال: کلاس ها [بایگانی]

prince4prodigy

شنبه 08 مهر 1391, 10:42 صبح

من یک عنصر select دارم که میوام هر کدوم از option هاش که انتخاب شدن یه سری عنصر دیگه ظاهر بشه.
اینم کدش:(کد آماده)
$('select.T-filterChooser').live('change',function(){
var filterType = $(':selected',this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier',filterItem).remove();
$('div.T-template.'+filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]',this).remove();
});

یه سری توضیح :
data-filter-type : یک خاصیت هست که خودمون به option های عنصر select اضافه کردیم برای این که بدونیم کدوم iption انتخاب شده.
.filterItem : یک کلاس css هست
2 خط آخر کد اهمیت خاصی نداره و با اون ها مشکلی ندارم
.qualifier : این کلاس دقیقا مشکل من هست. که در واقع تا حالا اصلا وجود نداشته و همین جا به صورت ضمنی ایجاد شده و اصلا نمیتونم درکش کنم که چرا استفاده میشه.
این مطلب به همون کلاس های تشخیص الگو مربوط میشه که چند روز پیش گذاشتم و کسی پاسخ نداد.

mehdi.mousavi

سه شنبه 18 مهر 1391, 14:42 عصر

سلام.
لطفا HTML مربوطه رو نیز اینجا قرار بدید تا پاسخ سوالتون رو بطور کامل بدم.

موفق باشید.

prince4prodigy

سه شنبه 18 مهر 1391, 20:20 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="DVD.css">
<script type="text/javascript" language="javascript" src="jq/jquery-1.7.2.min.js"></script>
<script type="text/ecmascript" language="javascript" src="jq/jquery-ui-1.8.22.custom.min.js"></script>
<script language="javascript" type="text/javascript" >
var filterCount = 0;
$(function(){
$('#addbtn').bind('click',function(){
var filterItem = $('<div>')
.addClass('filterItem')
.appendTo('#filterPane')
.data('suffix','.' +(filterCount++))
$('div.T-template.T-filterChooser')
.children().clone().appendTo(filterItem)
.trigger('adjustname')
});

$('.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);
})

$('select.T-filterChooser').live('change',function(){
var filterType = $(':selected',this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier',filterItem).remove();
$('div.T-template.'+filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]',this).remove();
});

$('#removebtn').live('click',function(){
$(this).closest('div.filterItem').remove()

})

});
</script>
</head>

<body>
<div>
<fieldset>
<legend>Filters</legend>
<div id="filterPane"></div>
<div>
<button type="button" id="addbtn">Add Filter</button>
<button type="button" id="aplybtn">Apply Filter</button>
</div>
</fieldset>
</div>
<div id="sss" style="font-size:80px; color:#FFF;"></div>

<div id="templates">
<div class="T-template T-filterChooser">
<button type="button" id="removebtn">-</button>
<select name="filter" class="T-filterChooser" title="select a filter">
<option selected="selected">--choose filter--</option>
<option value="title" data-filter-type="T-string">DVD Title</option>
<option value="category" data-filter-type="T-string">Category</option>
<option value="binder" data-filter-type="T-numberType">Binder</option>
<option title="date" data-filter-type="T-dataType">Release Date</option>
<option value="view" data-filter-type="T-boolean">viewed?</option>
</select>
</div>

<div class="T-template T-string">
<select name="stringType">
<option value="*">Contains</option>
<option value="^">Start with</option>
<option value="$">End With</option>
<option value="=">is Exactly</option>
</select>
<input name="term" />
</div>

<div class="T-template T-numberType">
<input class="numeric" name="numberRange1" /><span>throgh</span><input class="numeric" name="nemberRange2" />
</div>

<div class="T-template T-dataType">
<input class="dateval" name="dateRange1" /><span>throgh</span><input class="dateval" name="dateRange2" />
</div>

<div class="T-template T-boolean">
<input type="radio" name="booleanFilter" value="true" /><span>YES</span>
<input type="radio" name="booleanFilter" value="false" /><span>No</span>
</div>

</div>
</body>
</html>

اینم CSS:
body{ background-image:url(10.jpg);background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
fieldset{background-color:#666;}
legend{ color:black; background-color:white;}

#templates{display:none;}

.filterItem * {
margin-right: 4px;
margin-bottom: 4px;
}

.numeric{width:45px;}

.dateval{width:55px;}

.filterItem * {
margin-right: 4px;
margin-bottom: 4px;
}