Javascript 突出显示悬停'上的多个项目；s状态

好吧，很抱歉这个标题，我不太确定该怎么说

因此，我们有一个项目正在进行中，我们根据人们的捐赠提供多种激励（如果你知道这是什么，类似于Kickstarter）

不管怎样，我们让ben试图弄清楚的是，当有人在一个价格范围内徘徊时，我们希望他们将收到的物品具有完全不透明度，然后对进一步向下的捐赠值也是如此

也许这个图像会更有意义

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

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

我想这一定是JS中的一个，我对此一无所知

谢谢：]

编辑： 谢谢你给我的提示。我已经用css3完成了这个项目：不是

---

如果您使用的是原始JS，那么回退将是JS

getElementByClassname-

---

如果您使用的是jquery:$（“.classname”）.hover（function（）{}，function（）{}）

对于每个价格，您可以有一个不透明的项目列表

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

现在，您可以使用此映射添加和删除mouseenter和mouseleave事件上的不透明类

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

鼠标输入的功能（价格）{ var items=disabledItemsByPrice[价格]； 对于（变量i=0；i您可以使用

getElementsByTagName

或

getElementsByClassName

引用元素，当价格元素悬停在（

onmouseover

和

onmouseout

）上时，通过元素循环可以比较HTML中指定的值

本例仅更改价格范围内的元素的背景色

HTML:

1.
5.
30
100
项目1（5）
项目2（10）
项目3（20）
项目4（50）

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

        }
    }

}

var items=document.getElementsByClassName（“item”）；
功能显示范围（范围）{
对于（变量i=0；i=parseInt（item.getAttribute（“价格”））{
item.style.backgroundColor=“#555”；
}否则{
item.style.backgroundColor=“#000”；
}
}
}

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

给出每一个盒子上应该不透明的价格等级。有点像

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

然后使用

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

---

包括stylesWell，你的HTML是什么样子的？这可能是最好用类来完成的。为每个“类别”设置一个类，并根据它们是否属于该类别为每个项目分配类。悬停时，突出显示（或任何内容）相关类的所有项。Re:

我们让ben尝试找出

——所以。。。“本”知道了吗？

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

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