突出显示悬停条件下的多个项目答案

【问题标题】：Highlight multiple items on hover's condition突出显示悬停条件下的多个项目
【发布时间】：2012-03-23 11:41:00
【问题描述】：

好吧抱歉标题，不太清楚如何表达它。

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

无论如何，我们一直试图弄清楚的是，当有人徘徊在一个价格范围时，我们希望他们将收到的物品完全不透明，然后对于进一步降低的捐赠值也是如此。

也许图片会更有意义..

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

大约有 20 种商品，15 个价格等级，所有这些都相互关联。

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

谢谢你：]

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

而后备将是 JS

【问题讨论】：

那么，您的 HTML 是什么样的？
这可能最好用类来完成。为每个“类别”设置一个类，并根据它们是否属于该类别为每个项目分配类。悬停时，突出显示（或其他）具有相关类的所有项目。
回复：we have ben trying to figure out -- 那么......“本”有没有想过？ ??????

标签： javascript css hover

【解决方案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 包括样式

【讨论】：

【解决方案2】：

您可以使用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";

        }
    }

}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果您使用的是原始 JS

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

如果您使用的是 jquery ： $(".classname").hover(function(){}, function(){});

【讨论】：