Стилизовать несколько элементов одновременно

Question

Я создал четыре выпадающих списков выбора в HTML и динамически загружать их из объекта AJAX. я сделал это, чтобы вы могли выбрать элемент в списке выбора и событие onchange, которое запускало функцию javascript, которая получала бы соответствующие данные элементов и отображала их в таблице под списком выбора. На странице их четыре, чтобы человек мог выбрать четыре разных элемента и сравнить их характеристики. Это все работает, как талисман, однако я использую: hover в css, чтобы попытаться выделить характеристики четырех продуктов, которые совпадают с тем, на который нацелено то есть: если вы наводите курсор на одно имя продукта, оно выделяет все названия продуктов. вот код

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

выше здесь находится CSS для наведения эффекта на элемент name.

он подсвечивает просто отлично, но он только подсвечивает элемент, наведенный поверх, даже если все таблицы имеют одинаковые.class и #id для соответствия. просто новичок, поэтому любая помощь будет принята с благодарностью.

Answer 1

... хотя все таблицы имеют одинаковые.class и #id для соответствия

Похоже, у вас есть дубликаты ID. Идентификаторы должны быть уникальными.

Вы можете использовать атрибут класса и определить селектор класса в CSS для соответствия нескольким элементам и / или использовать более сложный селектор CSS.

Простой пример использования селектора классов

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