Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2015, 00:59
Новичок на форуме
Отправить личное сообщение для sizoider Посмотреть профиль Найти все сообщения от sizoider
 
Регистрация: 23.03.2015
Сообщений: 6

не получается оживить график HELP!
ребята!
я только изучаю javascript
помогите решить задачу
вобщем есть график,хочу что бы при наведении курсора,елемент оставался обычным цветом а все остальные затухали.тоесть получали opacity 0.3
и чтобы под элементом,появлялось сообшение с результатом вызова фунции.
сделал одним способом(он закомментирован),он работает,но я так понимаю это не правильно.
и почему то результат выполнения функции всегда один.я так понимаю что тут замыкание как то замешано?
если кому не лень,гляньте пожалуйста и скажите что я делаю неправильно,и как нужно делать.
уже мозг сломал))
спасибо заранее
http://jsbin.com/xaroyepuvu/1/edit
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2015, 03:21
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Так?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .graph {
      width: 50px;
      display: inline-block;
      transition: opacity 0.3s linear
    }
  </style>
</head>
<body>
  <div class='graph' id='green'></div>
  <div class='graph' id='red' ></div>
  <div class='graph' id='blue'></div>
  <div class='graph' id='yellow'></div>
  <div class='graph' id='black'></div>
  <div id="info"></div>
  
  <script>
    var arr = ['green','red','blue','yellow','black'],
        arr2 = [400, 200, 50, 300, 500],
        graph = document.querySelectorAll('.graph'),
        info = document.getElementById('info');

    for(i = 0; i < arr.length; i++){
      graph[i].style.backgroundColor = arr[i];
      graph[i].style.height = arr2[i] + 'px';
      graph[i].addEventListener('mouseover', aaa);
      graph[i].addEventListener('mouseout', bbb);
    }


    function aaa(e){
      Array.prototype.forEach.call(graph, function(item) {
        if(item != e.target) {
          item.style.opacity = "0.3";
        }
      });

      info.innerHTML = check(arr2[i]);
    }

    function bbb(){
      Array.prototype.forEach.call(graph, function(item) {
        item.style.opacity = "1";
      });

      info.innerHTML = '';
    }

    function check(num){
      if(num<100)
        return 'bad';
      if(num >= 100 && num < 200)
        return 'soso';
      if(num >= 200 && num < 300)
        return 'ok';
      if(num >= 300 && num < 400)
        return 'good';
      if(num >= 400 && num < 500)
        return 'faken good';
      else
        return 'amazing';
    }
  </script>
</body>
</html>


http://jsbin.com/gohugocuce/1/edit?html,js,output

Последний раз редактировалось Decode, 06.05.2015 в 03:24.
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2015, 16:07
Новичок на форуме
Отправить личное сообщение для sizoider Посмотреть профиль Найти все сообщения от sizoider
 
Регистрация: 23.03.2015
Сообщений: 6

ага спасибо.то что я хотел
только не понятно как ты это сделал
буду разбираться
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
flash график чужого сайта у себя на сайте Sonnic Общие вопросы Javascript 3 25.07.2014 19:05
Google Chart - не получается построить график из данных приходящих через json FRIE Общие вопросы Javascript 7 18.04.2014 19:07
Как нарисовать график на javascript? Бобр Общие вопросы Javascript 21 30.03.2014 17:27
не знаю как построить график Женя150 Общие вопросы Javascript 0 22.10.2012 17:09
dataTables + jeditable не получается сделать поля редактируемыми alekslkta Элементы интерфейса 0 02.05.2011 16:17