javascript - 同时设置多个元素的样式

Question

我在 html 中创建了四个下拉选择列表，并从 ajax 对象动态加载它们。我这样做是为了让您可以在选择列表中选择一个元素和一个运行 javascript 函数的 onchange 事件，该函数将获取元素各自的数据并显示在选择列表下方的表格中。页面上有四个，这样一个人可以选择四个不同的元素，然后比较它们的特性。这一切都像一种魅力，但我在 css 中使用 :hover 来尝试突出显示与所悬停的产品相匹配的四种产品的特征，即:如果将鼠标悬停在一个产品名称上，它会突出显示所有产品名称。这是代码

function displayStrainInfo(event){
    var eventTrigger = event.currentTarget;
    Inspection::Ptr inspectionModelvar testOption =    document.getElementById(eventTrigger.id);
    var selectedIndex = testOption.options[testOption.selectedIndex].index;
    //alert(flowerPeriod[0].firstChild.data);
    //alert(eventTrigger.id.substr(6,5));
    document.getElementById(eventTrigger.id.substr(6,5)).innerHTML = "<table class='strainInfoTable'><tr class='infoRow'><td id='strain_Name'>Strain Name: " + products[selectedIndex - 1].firstChild.data + "</td><td>Strain Genetics: " + genetics[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' colspan='2'>Indica:" + raceIndica[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspSativa: " + raceSativa[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspRuderalis: " + raceRuderalis[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Height: " + height[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Flower Period: " + flowerPeriod[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' id='botom'>Potency: " + potency[selectedIndex - 1].firstChild.data + "</td></tr></table>";
}

以上代码是创建显示所选产品信息的表的函数。

#strain_Name:hover{
    padding-top: 20px;
    padding-left: 20px;
    color: blue;
    font-size: 1.25em;
}

上面是hover css，用来测试name元素的效果。

它突出显示得很好，但它只突出显示悬停的元素，即使所有表都具有相同的 .class 和 #id 来匹配。只是一个新手，所以任何帮助将不胜感激。

Answer 1

...even though all the tables have the same .class and #id to match

听起来您有重复的 ID。 ID 必须是唯一的。

您可以使用 class 属性并在 CSS 中定义一个类选择器来匹配多个元素和/或使用更多 elaborate CSS selector .

使用类选择器的简单示例

<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>

.foo:hover { background-color: red; }

使用 jQuery + 类选择器的示例

完整的工作示例:http://jsfiddle.net/mSWcw/

$(".parent").hover(
    // fired on entry
    function(){
        var matchingChildren = $(".foo", this); // select all children with the class "foo" within the parent object
        matchingChildren.addClass("hovered");
    },

    // fired on exit
    function(){
        var matchingChildren = $(".foo", this);
        matchingChildren.removeClass("hovered");
    }  
);​