Реализация без jQuery
Есть скрипт, который показывает блоки при выборе определенного пункта select. Но он работает только с включенной библиотекой jQuery. Можно ли как-то реализовать то же самое без jQuery?
Это нужно, т.к. происходит очередной банальный конфликт библиотек, который я никак не могу отследить. С noConflict я как-то не подружился.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selecter1').click(function(){
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
});
$('#selecter2').click(function(){
document.getElementById("block1").style.display = "block";
document.getElementById("block2").style.display = "none";
});
$('#selecter3').click(function(){
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "block";
});
});
</script>
</head>
<body>
<select name="menu" size="1">
<option name="type" value="0" id="selecter1" select="selected"> </option>
<option name="type" value="1" id="selecter2">Фундамент</option>
<option name="type" value="2" id="selecter3">Перекрытия 1-го этажа</option>
</select>
<div id="block1" style="display:none;">БЛОК 1</div>
<div id="block2" style="display:none;">БЛОК 2</div>
</body>
</html>
|
вместо $(document).ready(function(){}) использовать window.onload = function(){}
вместо $('#selecter1')click(function(){}) - document.getElementById("selecter1").onclick = function(){} |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<script type="text/javascript">
window.onload = function(){
document.getElementById("selecter1").onClick = function(){
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
});
document.getElementById("selecter2").onClick = function(){
document.getElementById("block1").style.display = "block";
document.getElementById("block2").style.display = "none";
});
document.getElementById("selecter3").onClick = function(){
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "block";
});
});
</script>
</head>
<body>
<select name="menu" size="1">
<option name="type" value="0" id="selecter1" select="selected"> </option>
<option name="type" value="1" id="selecter2">Фундамент</option>
<option name="type" value="2" id="selecter3">Перекрытия 1-го этажа</option>
</select>
<div id="block1" style="display:none;">БЛОК 1</div>
<div id="block2" style="display:none;">БЛОК 2</div>
</body>
</html>
|
IndigoHollow,
ощути разницу между словами "onclick" и "onClick" найди 10 отличий. |
IndigoHollow,
круглые скобки неубраны и клик по option это суперхит!!! |
Цитата:
|
Цитата:
А не знаешь как решить вот эту проблему? http://javascript.ru/forum/showthrea...499#post286499 |
IndigoHollow,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var b = document.querySelector("select"),
c = document.querySelectorAll("div");
b.onchange = function () {
for (var b = this.value - 1, a = 0; a < c.length; a++) c[a].style.display = a != b ? "none" : "block"
}
};
</script>
<title></title>
</head>
<body>
<select name="menu" size="1">
<option name="type" value="0" id="selecter1" select="selected">
</option>
<option name="type" value="1" id="selecter2">
Фундамент
</option>
<option name="type" value="2" id="selecter3">
Перекрытия 1-го этажа
</option>
</select>
<div id="block1" style="display:none;">
БЛОК 1
</div>
<div id="block2" style="display:none;">
БЛОК 2
</div>
</body>
</html>
|
Мой вариант, потопорнее. У рони, покомпактнее, нужно только селекторы по классу использовать и дать имена нормальные переменным (кстати, не обижайся если начну ставить минусы за твои a,b,c - реально напрягает когда читаешь код).
<!DOCTYPE html>
<html>
<head>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
</head>
<body>
<select name="menu" size="1" id="select">
<option name="type" value="0" select="selected"> </option>
<option name="type" value="1">Фундамент</option>
<option name="type" value="2">Перекрытия 1-го этажа</option>
</select>
<div id="block1" style="display:none;">БЛОК 1</div>
<div id="block2" style="display:none;">БЛОК 2</div>
<script>
(function(){
var select = document.getElementById("select")
var block1 = document.getElementById("block1");
var block2 = document.getElementById("block2");;
var toggle = function(show1, show2) {
block1.style.display = show1 ? "block" : "none";
block2.style.display = show2 ? "block" : "none";
}
select.onchange = function() {
toggle(this.value == 1, this.value == 2);
};
})()
</script>
</body>
</html>
Рекомендую не ждать onload события - проще опустить скрипт вниз, когда все элементы уже доступны. |
danik.js,
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 08:50. |