Синтаксис Javascript для объектов в jquery

Question

Я пытаюсь улучшить свою страницу с помощью меню правой кнопки мыши, но у меня возникают проблемы с построением правильных структур для ее легкого заполнения.

В настоящее время моя страница содержит (среди прочего) список элементов, которые пользователь может просмотреть. (таблица html) На основании роли пользователя, текущего состояния и контекста строки пользователь может выполнять одно из различных действий с каждой строкой данных. (утвердить, отклонить, передать это кому-либо еще и т. д.) Моя страница ASP.Net обрабатывает это, устанавливая для кнопки видимости в строке значение true, если опция доступна. Я могу управлять Cssclass каждой кнопки, и я устанавливаю класс, например, кнопки «Approve» на «Approvebtn».

Теперь я хочу улучшить свой сайт с помощью правильного меню. Я расширяю свой сайт с Кори С.Н. Плагин LaQiska для контекстного меню jQuery - http://abeautifulsite.net/notebook/80

Этот плагин позволяет переопределять поведение правой кнопки мыши по умолчанию для любого элемента с помощью контекстного меню, управляемого пользователем. Меню вставляется в вашу страницу как неупорядоченный список и становится видимым, когда это необходимо.

            <ul id="rightMenu" class="contextMenu">
                <li class="details"><a href="#details">Details</a> </li>
                <li class="addnote"><a href="#addnote">AddNote</a> </li>
                <li class="listnote"><a href="#listnote">ShowNotes</a> </li>
                <li class="approve"><a href="#approve">Approve</a> </li>
                <li class="reject"><a href="#reject">Reject</a> </li>
                <li class="release"><a href="#release">Release</a> </li>
                <li class="takeover"><a href="#takeover">Takeover</a> </li>
            </ul>

Ваше приложение получает обратный вызов, если щелкнуть что-то в правом меню, и вы можете запросить действие (элемент фиктивного href), чтобы увидеть, какой это был элемент. Мне очень нравится это меню, потому что оно простое в использовании и полностью в стиле CSS.

Однако мне нужно сделать что-то, что этот плагин не поддерживает. Мне нужно изменить, какие пункты доступны в меню от строки к строке. По сути, если в строке имеется кнопка Image (например, утвердить), то должен существовать и соответствующий ей пункт меню.

Мне удалось получить доступ к меню непосредственно перед его отображением, слегка изменив плагин, чтобы вызвать мою функцию прямо перед отображением меню. Это работает, но логика, которую я должен был написать, кажется настолько грубой силой, что должен быть лучший путь ...

В моем обратном вызове:

 function jimsbuggeredfunction(menu,el)

«el» - это элемент, по которому щелкнули правой кнопкой мыши (обычно это ячейка таблицы), а «menu» - это меню, к которому привязан этот щелчок правой кнопкой мыши. (поэтому я должен использовать это имя, а не указывать в #rightMenu ')

Таким образом, строка «if» определяет, содержит ли строка таблицы, содержащая элемент, который был «щелкнут правой кнопкой мыши», определенную кнопку (по имени класса), если она делает этот пункт меню включенным, в противном случае он отключен. Этот процесс продолжается для каждого пункта меню, который я хочу сделать гибким, строка за строкой.

function jimsbuggeredfunction(menu,el) {

 if($(el).parents("tr:eq(0)").find('.approvebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#approve');
 else
    $('#rightMenu').disableContextMenuItems('#approve');

 if($(el).parents("tr:eq(0)").find('.rejectbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#reject');
 else
    $('#rightMenu').disableContextMenuItems('#reject');

 if($(el).parents("tr:eq(0)").find('.releasebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#release');
 else
    $('#rightMenu').disableContextMenuItems('#release');

 if($(el).parents("tr:eq(0)").find('.takeoverbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#takeover');
 else
    $('#rightMenu').disableContextMenuItems('#takeover');

 if($(el).parents("tr:eq(0)").find('.revertbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#revert');
 else
    $('#rightMenu').disableContextMenuItems('#revert');

 if($(el).parents("tr:eq(0)").find('.removebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#remove');
 else
    $('#rightMenu').disableContextMenuItems('#remove');

 if($(el).parents("tr:eq(0)").find('.addnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#addnote');
 else
    $('#rightMenu').disableContextMenuItems('#addnote');

 if($(el).parents("tr:eq(0)").find('.listnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#listnote');
 else
    $('#rightMenu').disableContextMenuItems('#listnote');
};

Должен быть лучший способ настроить это, чтобы он также просто игнорировал пункты меню, которые я хочу отображать все время), но в данный момент он ускользает от меня. Есть ли лучший способ сделать это?

Спасибо

Jim

Answer 1

Я бы нашел способ создать сопоставление между двумя идентификаторами и более систематический способ поиска соответствующей кнопки. Например, если кнопка всегда принадлежит определенной ячейке, которая имеет класс, скажем, «buttonclass», то что-то вроде этого должно работать:

var mapping = {
  takeoverbtn: '#takeover',
  listnotebtn: '#listnote'
  // ...
};


function jimsbuggeredfunction(menu,el) {
    var buttontype = $(el).parents("tr:eq(0)").find('.buttonclass').children().attr("class");
    $('#rightMenu').disableContextMenuItems(mapping[buttontype]);
}

Мой jQuery немного ржавый, возможно, есть более чистый способ получения типа кнопки, но эта общая идея должна сработать.