Question

对不起标题，不太确定如何用它来表达。

所以我们有一个项目正在进行，我们根据人们捐赠的内容提供多种激励措施（如果您知道这是什么，则类似于Kickstarter）。

无论如何，我们想要弄明白的是，当有人在一个价格区间徘徊时，我们希望他们将收到的物品具有完全不透明度，然后对于进一步的捐赠值而言相同。

也许图像更有意义..

所以蓝色是悬停，当你将鼠标悬停在“$ 1 +”上时，第1,3,4项是不透明的。但是当你将鼠标悬停在“$ 15 +”上时，只有第1,3项是不透明的。

大约有20个项目和15个价格括号，所有这些项目都相互关联。

我认为这必须是JS中的一个，我一无所知。

谢谢：]

编辑：谢谢你的所有提示。我用css3完成了项目：不是

后备将是JS

Answer 1

我会给出一个相当简单的解决方案。

给每个盒子的价格都应该是不透明的。有点像

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

然后，在您的价格链接上，使用类名作为特定链接的id

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

然后使用

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

Demo

Demo 2包括样式

Answer 2

您可以列出每个价格不透明的商品。

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

现在，您可以使用此地图在mouseenter和mouseleave事件上添加和删除opaque类。

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

如果您使用原始JS

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

如果你使用的是jquery：$（“。classname”）。hover（function（）{}，function（）{}）;

Answer 4

您可以使用getElementsByTagName或getElementsByClassName引用元素，并且当价格元素悬停在（onmouseover和onmouseout上）时，循环元素可以比较HTML中指定的值。

此示例仅更改属于价格范围的元素的背景颜色。

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";

        }
    }

}

在悬停状态下突出显示多个项目

4 个答案:

Demo

Demo 2包括样式