Изменение значения класса на основе идентификатора элемента

Question

Поручите меня, если я собираюсь сделать это неправильно, я довольно новичок.

Вот моя настройка, которая очень похожа на внешний интерфейс Outlook, я думаю.

Левая панель (плавающий div) содержит список контейнеров, на которые вы можете нажать (например, электронные письма). Панель правой руки содержит набор невидимых контейнеров, которые должны стать видимыми, когда их класс изменен на другой класс css.

Я пытаюсь настроить его там, где, если вы нажмете на элемент в левой панели, он затем выполнит действие javascript onclick (сохраненное во внешнем файле .js), которое переключает значение класса right div между двумя css классы.

Onclick в левой панели div передает $ _row ['uniqueID'] функции. То есть уникально увеличиваемое имя столбца. Это также значение ID правой панели.

Вводя это в целом, может ли кто-нибудь направить меня на то, как это сделать?

левой панели ...

<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \"> 

правой панели ...

<div id=".$row['uniqueIdentifier']," class=\"mL\"> 

CSS ...

div.mL {display:none;} 
div.mL.active {display:block;} 

Answer 1

function toggleMenu(div){ 
    $('#'+div).addClass('active'); 
} 

jQuery имеет .addClass() и .removeClass() методы.

Я думаю, что это то, что вам нужно, сообщите мне, если нет.

Answer 2

не изменяя слишком много кода, я предлагаю сделать это:

div.mL {display:none;} 
div.mLactive {display:block;} 

я стер точку, так что у меня сейчас 2 разных классов. Таким образом, при нажатии вы просто меняете класс div с правильным идентификатором на mLactive.

В JQuery это может быть сделано с помощью $ (# 'theid'). AddClass ('mLactive'); Это добавляет только новый класс. Вы также хотите удалить предыдущий класс с помощью $ (# 'theid'). RemoveClass ('mL');

Другой способ: $ (# 'theid'). Attr («класс», «mLactive»); Это не требует удаления предыдущего класса. Твой выбор. Другим преимуществом этого метода является то, что javascript имеет способ делать то, что не требует JQuery.

JQuery также имеет простые опции $ (# 'theid'). Show(); и $ (# 'theid). hide() btw.