Highlight multiple items when hanging

Question

Okay, sorry for the title, not too sure how to phrase it.

So, we have a project, and we offer several incentives depending on what people donate (like Kickstarter, if you know what it is).

In any case, what we are trying to find out when someone fluctuates in the same price range, we want the items that they received to be completely opaque, and then the same for further donation values.

Perhaps the image will make more sense.

So blue is a hover, and when you hover over "$ 1 +", items 1, 3, 4 are opaque. But when you hover over "$ 15 +", only items 1, 3 are opaque.

There are about 20 items and 15 price brackets, all of which are interconnected.

I guess this should be one in JS, which I know nothing about.

Thanks:]

Edit: Thanks for all the tips. I completed the project with css3: not

And the backup will be JS

Answer 1

I will give a fairly simple solution.

Give each class price classes where it should be opaque. Sort of

<div id="item1" class="p1 p15">Item 1</div> 

Then on your price links use class name as id for specific links

  <a class="price" id="p1">$1+</a> 

Then use

 $(".price").mouseover(function() { $(".items").css("opacity", 0.4); id = $(this).attr('id'); $("."+id).css("opacity", 1); }); 

Demo

Demo 2 Including Styles

Answer 2

You can have a list of opaque elements for each price.

 disabledItemsByPrice = { "5": [2], "15": [2,4] } 

Now you can use this map to add and remove an opaque class in mouseenter and mouseleave events.

 function onMouseEnter(price) { var items = disabledItemsByPrice[price]; for(var i=0; i < items.length; i++) { document.getElementById("item"+items[i]).classList.add("opaque"); } } function onMouseLeave(price) { var items = disabledItemsByPrice[price]; for(var i=0; i < items.length; i++) { document.getElementById("item"+items[i]).classList.remove("opaque"); } } 

Answer 3

if you use raw js

getElementByClassname - https://developer.mozilla.org/en/DOM/document.getElementsByClassName

if you use jquery: $ (". classname"). hover (function () {}, function () {});

Answer 4

You can reference elements using getElementsByTagName or getElementsByClassName , and when a price element freezes ( onmouseover and onmouseout ), the loop through the elements can compare the value assigned in HTML.

This example will simply change the background color of an item that falls within the price range.

HTML:

 <div class="price_container"> <div class="price" onmouseover="showInRange(1)" onmouseout="showInRange(-1)">1</div> <div class="price" onmouseover="showInRange(5)" onmouseout="showInRange(-1)">5</div> <div class="price" onmouseover="showInRange(30)" onmouseout="showInRange(-1)">30</div> <div class="price" onmouseover="showInRange(100)" onmouseout="showInRange(-1)">100</div> </div> <div class="item_container"> <div class="item" price="5">Item 1 (5)</div> <div class="item" price="10">Item 2 (10)</div> <div class="item" price="20">Item 3 (20)</div> <div class="item" price="50">Item 4 (50)</div> </div> 

JavaScript:

 var items = document.getElementsByClassName("item"); function showInRange(range) { for(var i = 0; i < items.length; i++) { var item = items[i]; if(range >= parseInt(item.getAttribute("price"))) { item.style.backgroundColor = "#555"; } else { item.style.backgroundColor = "#000"; } } }