Форум

olahanz · #1 (**permalink**) 03.06.2012, 03:24

Здравствуйте!
Есть задание, заключающееся в скрывании элементов с помощью селекта при выбранной опции ,
сори, даже по русски толково объяснить не могу

В общем 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');

Пробовала по разному, но ничего не выходит
Извините, что обращаюсь с такой простотой, как я подозреваю. Но самой найти решение не удалось или я не так искала
Помогите пожалуйста

Octane · #2 (**permalink**) 03.06.2012, 06:01

<!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>

olahanz · #3 (**permalink**) 03.06.2012, 10:27

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>

Octane · #4 (**permalink**) 03.06.2012, 10:52

Ну так переделайте, как нужно

olahanz · #5 (**permalink**) 03.06.2012, 11:44

Пробовала по разному менять предложенный Вами код не получается

.помогите!

Deff · #6 (**permalink**) 03.06.2012, 12:25

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>

olahanz · #7 (**permalink**) 03.06.2012, 13:30

Deff!
Bolshoe spasibo, tochno tak kak bilo hujno.

Izvinite za shrift, pishu s raboti

Форум

Справочник

Discord чат

Курсы javascript