Скрытие объектов с помощью селект
Здравствуйте!
Есть задание, заключающееся в скрывании элементов с помощью селекта при выбранной опции , сори, даже по русски толково объяснить не могу:-? В общем html выглядит так:
<div id="cont">
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="sel">
<select name="menu" id="sel1" onchange="showTR();">
<option selected="selected" value = "0">Choose a color</option>
<option value = "1">Red</option>
<option value = "2">Green</option>
<option value = "3">Blue</option>
<option value = "4">Yellow</option>
</select>
</div>
</div>
Единственное, что более ни менее подходит это вот это
var selectedOption = visibleSelect.find('option:selected');
Пробовала по разному, но ничего не выходит Извините, что обращаюсь с такой простотой, как я подозреваю. Но самой найти решение не удалось или я не так искала Помогите пожалуйста:) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.color-selector {
margin: 10px;
}
.color-list, .color-list .color {
display: inline;
margin: 0;
padding: 0;
}
.color-list .color {
list-style: none;
padding: 4px;
color: #fff;
}
.color-list .red {
background-color: red;
}
.color-list .green {
background-color: green;
}
.color-list .blue {
background-color: blue;
}
.color-list .yellow {
color: #000;
background-color: yellow;
}
</style>
</head>
<body>
<div class="color-selector">
<ul class="color-list">
<li class="color red">red</li>
<li class="color green">green</li>
<li class="color blue">blue</li>
<li class="color yellow">yellow</li>
</ul>
<select>
<option value="none" selected>Choose a color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
<div class="color-selector">
<ul class="color-list">
<li class="color red">red</li>
<li class="color green">green</li>
<li class="color blue">blue</li>
<li class="color yellow">yellow</li>
</ul>
<select>
<option value="red">Red</option>
<option value="green" selected>Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
(function () {
function ColorSelector(params) {
$.extend(this, params);
}
ColorSelector.prototype = {
constructor: ColorSelector,
root: null,
colorSel: ".color",
selectSel: "select",
notSelectedVal: "none",
_$colors: null,
_$select: null,
_findElements: function () {
this._$colors = $(this.colorSel, this.root);
this._$select = $(this.selectSel, this.root);
},
_initEvents: function () {
this._$select.change($.proxy(this._onChange, this));
},
_onChange: function () {
var value = this._$select.val();
this._$colors.hide();
if (value != this.notSelectedVal) {
this._$colors.filter("." + value).show();
}
},
init: function () {
this._findElements();
this._initEvents()
this._onChange();
}
};
$.fn.colorSelector = function (params) {
return this.each(function () {
new ColorSelector($.extend({root: this}, params)).init();
});
};
}());
$(".color-selector").colorSelector();
</script>
</body>
</html>
|
Octane, большое спасибо за ответ!
Простите за нечеткое объяснение в предыдущем посте(( Но в моем случае цветные объекты должны изначально присутствовать, в определенной css позиции. А созданная функция должна скрывать один из объектов в соответствии с выбранным цветом, не меняя позиции других элементов, и снова показывать при выборе другого, скрывая каждый раз тот, который выбран. Вот, примерно так
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style type="text/css">
#cont{width:70px;margin:5% auto;position:relative;height:70px;border:1px solid #000;}
#red,#green,#blue,#yellow{height: 40px;width: 40px;left: 10px;position: absolute;}
#red{background-color:red;left: 0;top:0}
#green{background-color:green;left:10px;top:10px}
#blue{background-color:blue;left: 20px;top:20px}
#yellow{background-color:yellow;left: 30px;top:30px}
#sel {position:absolute;left:0px;top:67px}</style>
</head>
<body>
<div id="cont">
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="sel">
<select name="menu" id="sel1" onchange="showTR();">
<option selected="selected" value = "0">Choose a color</option>
<option value = "1">Red</option>
<option value = "2">Green</option>
<option value = "3">Blue</option>
<option value = "4">Yellow</option>
</select>
</div>
</div>
</body>
</html>
|
Ну так переделайте, как нужно
|
Пробовала по разному менять предложенный Вами код не получается:cray: .помогите!
|
olahanz,
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style type="text/css">
#cont{width:70px;margin:5% auto;position:relative;height:70px;border:1px solid #000;}
#red,#green,#blue,#yellow{height: 40px;width: 40px;left: 10px;position: absolute;}
#red{background-color:red;left: 0;top:0}
#green{background-color:green;left:10px;top:10px}
#blue{background-color:blue;left: 20px;top:20px}
#yellow{background-color:yellow;left: 30px;top:30px}
#sel {position:absolute;left:0px;top:67px}</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showTR () {
$("#Show-Hid div[id]").show();
$("#Show-Hid #"+$('#sel1 option:selected').text()).hide()
}
</script>
</head>
<body>
<div id="cont">
<div id="Show-Hid">
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
</div>
<div id="sel">
<select name="menu" id="sel1" onchange="showTR();">
<option selected="selected" value = "0">Choose a color</option>
<option value = "1">Red</option>
<option value = "2">Green</option>
<option value = "3">Blue</option>
<option value = "4">Yellow</option>
</select>
</div>
</div>
</body>
</html>
|
Deff!
Bolshoe spasibo, tochno tak kak bilo hujno.:dance: Izvinite za shrift, pishu s raboti |
| Часовой пояс GMT +3, время: 06:09. |