jquery 中对象的 Javascript 语法

Question

我正在尝试使用 jquery 鼠标右键菜单来增强我的页面，但在构建正确的结构以轻松填充它时遇到困难。

当前我的页面包含(除其他外)供用户查看的项目列表。 (一个 html 表)根据用户 Angular 色以及该行的当前状态和上下文，用户可以对每行数据执行各种操作之一。 (批准、拒绝、将其提交给其他人等。)如果该选项可用，我的 ASP.Net 页面通过将行中图像按钮的可见性设置为 true 来处理此问题。我可以控制每个按钮的Cssclass，并将例如“approve”按钮的类设置为“approvebtn”。

现在我想用正确的菜单增强我的网站。我正在与 Cory S.N. 一起扩展我的网站LaViska 的 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 样式。

但是，我需要做一些该插件本身似乎不支持的事情。我需要逐行更改菜单上可用的项目。基本上，如果行中存在图像按钮(例如批准)，则其相应的菜单项也应该存在。

通过稍微更改插件，我能够在菜单显示之前访问菜单，以便在菜单显示之前调用我的函数。这可行，但我必须编写的逻辑似乎很暴力，必须有更好的方法......

在我的回调中:

 function jimsbuggeredfunction(menu,el)

“el”是右键单击的元素(通常是表格单元格)，“menu”是右键单击绑定(bind)到的菜单。 (所以我应该使用该名称而不是硬编码为#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');
};

必须有一个更好的方法来设置它，这样它也可以忽略我想要一直显示的菜单项)但它现在正在逃避我。有没有更好的方法来实现这一点？

谢谢

吉姆

Answer 1

我会找到一些方法来创建两个 ID 之间的映射，以及一些更系统的方法来查找相关按钮。例如，如果按钮始终属于具有类的某个单元格(假设为“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 有点生疏，可能有一种更简洁的方法来检索按钮类型，但这个总体想法应该可行。