не получается оживить график HELP!
ребята!
я только изучаю javascript помогите решить задачу вобщем есть график,хочу что бы при наведении курсора,елемент оставался обычным цветом а все остальные затухали.тоесть получали opacity 0.3 и чтобы под элементом,появлялось сообшение с результатом вызова фунции. сделал одним способом(он закомментирован),он работает,но я так понимаю это не правильно. и почему то результат выполнения функции всегда один.я так понимаю что тут замыкание как то замешано? если кому не лень,гляньте пожалуйста и скажите что я делаю неправильно,и как нужно делать. уже мозг сломал)) спасибо заранее http://jsbin.com/xaroyepuvu/1/edit |
Так?
<!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 |
ага спасибо.то что я хотел
только не понятно как ты это сделал буду разбираться |
Часовой пояс GMT +3, время: 14:01. |