Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.12.2013, 16:33
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Реализация без 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">&nbsp;</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>
Ответить с цитированием
  #2 (permalink)  
Старый 24.12.2013, 16:40
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

вместо $(document).ready(function(){}) использовать window.onload = function(){}
вместо $('#selecter1')click(function(){}) - document.getElementById("selecter1").onclick = function(){}
Ответить с цитированием
  #3 (permalink)  
Старый 24.12.2013, 16:59
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Сообщение от Яростный Меч Посмотреть сообщение
вместо $(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">&nbsp;</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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.12.2013, 17:03
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

IndigoHollow,

ощути разницу между словами "onclick" и "onClick"
найди 10 отличий.
Ответить с цитированием
  #5 (permalink)  
Старый 24.12.2013, 17:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

IndigoHollow,
круглые скобки неубраны и клик по option это суперхит!!!
Ответить с цитированием
  #6 (permalink)  
Старый 24.12.2013, 17:05
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Сообщение от Яростный Меч Посмотреть сообщение
IndigoHollow,

ощути разницу между словами "onclick" и "onClick"
найди 10 отличий.
Ощутил еще в первый раз. Оба варианта не работают
Ответить с цитированием
  #7 (permalink)  
Старый 24.12.2013, 17:14
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Сообщение от рони Посмотреть сообщение
IndigoHollow,
круглые скобки неубраны и клик по option это суперхит!!!
Спасибо, добрый человек! Всегда меня выручаешь!

А не знаешь как решить вот эту проблему?
http://javascript.ru/forum/showthrea...499#post286499
Ответить с цитированием
  #8 (permalink)  
Старый 24.12.2013, 17:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #9 (permalink)  
Старый 24.12.2013, 17:38
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Мой вариант, потопорнее. У рони, покомпактнее, нужно только селекторы по классу использовать и дать имена нормальные переменным (кстати, не обижайся если начну ставить минусы за твои 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">&nbsp;</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, 24.12.2013 в 18:02.
Ответить с цитированием
  #10 (permalink)  
Старый 24.12.2013, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

danik.js,
Сообщение от danik.js
кстати, не обижайся если начну ставить минусы за твои
Сообщение от danik.js
var states = [[false, false], [true, false], [false, true]]; toggle.apply(null, states[this.value]);
Сообщение от danik.js
реально напрягает когда читаешь код
!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация условий if/else с jQuery jsuse jQuery 8 25.09.2015 20:02
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
bind и unbind но без jquery syegorius Events/DOM/Window 1 04.12.2011 13:09
как с помощью jquery отсылать без перезагрузки... serhanters jQuery 11 22.07.2011 21:17
JQuery CSS анализатор javascript jQuery 2 15.08.2010 21:27