Форум

sizoider · #1 (**permalink**) 06.05.2015, 00:59

ребята!
я только изучаю javascript
помогите решить задачу
вобщем есть график,хочу что бы при наведении курсора,елемент оставался обычным цветом а все остальные затухали.тоесть получали opacity 0.3
и чтобы под элементом,появлялось сообшение с результатом вызова фунции.
сделал одним способом(он закомментирован),он работает,но я так понимаю это не правильно.
и почему то результат выполнения функции всегда один.я так понимаю что тут замыкание как то замешано?
если кому не лень,гляньте пожалуйста и скажите что я делаю неправильно,и как нужно делать.
уже мозг сломал))
спасибо заранее
http://jsbin.com/xaroyepuvu/1/edit

Decode · #2 (**permalink**) 06.05.2015, 03:21

Так?

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

sizoider · #3 (**permalink**) 07.05.2015, 16:07

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

Форум

Справочник

Discord чат

Курсы javascript