Highlight multiple items on hover's condition

问题

Okay sorry for the title, wasn't too sure how to phrase it.

So we have a project going, and we are offering multiple incentives depending on what people donate (similar to Kickstarter if you know what that is).

Anyway, what we have ben trying to figure out is when someone hovers on one price range we want the items they will receive to have full opacity, and then the same for the further down donation values.

Maybe the image will make more sense..

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

There are around 20 items, and 15 price brackets, all in which are interlinked with one another.

I assume this has to be one in JS, something I know nothing about.

Thank you :]

Edit: Thank you for all the tips. I have completed the project with the css3 :not

And the fallback will be JS

回答1:

I will give a rather simple solution.

Give every boxes classes of price where should be opaque on. Kinda like

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

Then, on your price links use the classname as the id for the specific links

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

Then use the

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

Demo

Demo 2 Including the styles

回答2:

You can have a list of items that are opaque for each price.

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

Now, you can use this map to add and remove the opaque class on the 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");
    }
}

回答3:

if you're using raw JS

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

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

回答4:

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

This example will just change the background color of an element that falls in a 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";

        }
    }

}

来源：https://stackoverflow.com/questions/9576167/highlight-multiple-items-on-hovers-condition

标签

javascript

css

hover