Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2014, 15:22
Новичок на форуме
Отправить личное сообщение для Jok3r Посмотреть профиль Найти все сообщения от Jok3r
 
Регистрация: 31.07.2014
Сообщений: 3

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

Существует форма в которой есть select
<select name="TOURINC" class="TOURINC" autocomplete="off">
 <option value="0">----</option>
 <option value="58">ISTANBUL</option>
 <option value="70">BEIJING</option>
 <option value="69">KHARKIV</option>
 <option value="68">LONDON</option>
 <option value="67">ANTALIA</option>
</select>

/*в css class="hide_text" по умолчанию скрывает данный DIV*/
<div id="info_tours">
 <div id="58" class="hide_text">ISTANBUL - описание бла, бла, бла...</div>
 <div id="70" class="hide_text">BEIJING- описание бла, бла, бла...</div>
 <div id="69" class="hide_text">KHARKIV- описание бла, бла, бла...</div>
 <div id="68" class="hide_text">LONDON- описание бла, бла, бла...</div>
 <div id="67" class="hide_text">ANTALIA- описание бла, бла, бла...</div>
</div>


Есть скрипт
var tourValue = document.getElementsByName('TOURINC')
var id_tour = tourValue[0].value


var node = document.getElementById(id_tour); // скрытый div у которого  id равен value значению 
var classToRemove = "hide_text";  
var classToAdd = "hide_text";

/*Удаление класса*/
function removeClass(node, classToRemove) {
    "use strict";
 
    var arrayClassName = [].slice.call(node.classList);
 
    for (var i = 0; i < arrayClassName.length;) {
 
        if (arrayClassName[i] === classToRemove) {
            arrayClassName.splice([i], 1)
        } else {
            i++
        }
    }
 
    if (typeof(arrayClassName[0]) === "undefined") {
        return node.removeAttribute("class")
    } else {
        return node.className = arrayClassName.join(' ');
    }
}

removeClass (node, classToRemove)

/*добавление класса*/
function addClass(node, classToAdd) {
"use strict";
    var arrayClassName = [].slice.call(node.classList);
     
    for (var i = 0; i < arrayClassName.length; i++) {
        if (arrayClassName[i] === classToAdd) {
            return node.className;
        }
    }
    return node.className = node.className + " " + classToAdd;
}
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2014, 15:43
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .hide_text {
      display: none;
    }
  </style>
</head>
<body>
<select name="TOURINC" class="TOURINC" autocomplete="off">
  <option value="0">----</option>
  <option value="58">ISTANBUL</option>
  <option value="70">BEIJING</option>
  <option value="69">KHARKIV</option>
  <option value="68">LONDON</option>
  <option value="67">ANTALIA</option>
</select>
 
<br>
<br>
/*в css class="hide_text" по умолчанию скрывает данный DIV*/
<div id="info_tours">
  <div id="58" class="hide_text">ISTANBUL - описание бла, бла, бла...</div>
  <div id="70" class="hide_text">BEIJING- описание бла, бла, бла...</div>
  <div id="69" class="hide_text">KHARKIV- описание бла, бла, бла...</div>
  <div id="68" class="hide_text">LONDON- описание бла, бла, бла...</div>
  <div id="67" class="hide_text">ANTALIA- описание бла, бла, бла...</div>
</div>
</body>
<script>
  
  var sel = document.querySelector('.TOURINC');
  var tours = document.querySelectorAll('#info_tours div');

  sel.addEventListener('change', function(e) {

    for (t in [].slice.call(tours)) {
      if (tours[t].id == e.target.value) {
        tours[t].classList.remove('hide_text');
      } else {
        tours[t].classList.add('hide_text');
      }
    }
  }, false);
</script>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2014, 15:44
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Как видишь, тебе не обязательно было писать функции removeClass и addClass, они уже встроены в свойство classList как методы.
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2014, 14:23
Новичок на форуме
Отправить личное сообщение для Jok3r Посмотреть профиль Найти все сообщения от Jok3r
 
Регистрация: 31.07.2014
Сообщений: 3

а как быть с 8 осликом?
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2014, 15:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Jok3r, если у тебя в атрибуте class будет только одно значение - просто меняй значение свойства className.
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2014, 17:44
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Jok3r,
а вот с ослом придётся либо самопалы пилить, либо jQuery использовать.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработчик событий по классам Aftal1ck Общие вопросы Javascript 2 31.10.2012 13:07
Размножается обработчик событий demoniqus Общие вопросы Javascript 3 22.10.2012 14:04
не удается убрать обработчик событий. mitiya Общие вопросы Javascript 0 08.09.2012 21:18
Какой есть обработчик событий, который будет запускаться после выполнения всего кода? KamalovRadik jQuery 12 08.11.2011 07:14
Обработчик событий kucaeva Общие вопросы Javascript 2 10.12.2010 16:42