Javascript 是否有更好的方法将菜单单击事件映射到它'；s对应代码

好的，基本上，当我点击一个菜单选项时，一个对应的html在执行一些其他代码集后被加载到布局页面的内容块中，现在我已经将每个菜单选项的点击事件映射到它相应的代码集，以执行如下操作：

 <li onclick="changeContentTo('home');">About Us</li>
 <li onclick="changeContentTo('rules');">Rules</li>

我想知道有没有更好/合适的方法来做这件事

我不想将单击事件绑定到选择器，比如说

$（'.myLink'）。例如，如果没有HTML5编码，则单击（）

，事件处理将与上面相同

基本上，我想要的是从代码中尽可能多地去除映射，并将其放在一个单独的obj（可能位于一个单独的JS文件中）中，这将模拟映射的表/引用，即如果我要更改映射，我只需更新那个虚构的表。

像这样尝试

HTML

<li onclick="changeContentTo('home','content.htm');">About Us</li>
<li onclick="changeContentTo('rules','actsAndRules.htm');">Rules</li>

<script>
  function changeContentTo(type,page){
    $elesToHide=something;// let $elesToHide and $c are pre defined
    if(!$elesToHide.is(":visible"))
         $elesToHide.slideDown()
    $c.load(page) ;    
  }
</script>

关于我们 规则 函数changeContentTo（类型，页面）{ $elesToHide=something；//让$elesToHide和$c是预定义的 如果（！$elesToHide.is（“：可见”）） $elesToHide.slideDown（） $c.load（第页）； } 试试看

绑定

click

到选择器比指定

onclick

与每个元素内联更可取

您可以轻松地将该代码段包装到函数中，并将其单独存储在外部js文件中，以便从此处调用

if(!$elesToHide.is(":visible"))
            $elesToHide.slideDown();

这部分似乎总是一样的。 只需将其放在

开关

部件之前

然后，它只能归结为区分url。您可以直接传递：

<li onclick="changeContentTo('content.htm');">About Us</li>
 <li onclick="changeContentTo('actsAndRules.htm');">Rules</li>



$c.load(parameterOfFunction ) ; 

关于我们 规则 $c.load（参数OFFUNCTION）；

关于我们
规则
$（函数（）{
$（'clickable'）。单击（函数（e）{
e、 预防默认值（）；
$c.load（$this.data（'location'））；
});
});

定义字典

var $map = {'rules': 'actsAndRules.html', 'home': 'content.html'};

现在，您可以直接切换而不是切换

$c.load($map[$arg]);

假设函数参数名为

$arg

编辑

要仅在满足任何切换条件时运行代码，可以执行以下操作：

var $flag = false;
// your switch
...
case default:
    $flag = true;
    break;
...

// after switch
if (!$flag) {
// common code.
}

---

比我快一秒！：）请看我更新的问题，没有HTML5没有通用选择器，谢谢部分

如果（！$elesToHide.is（“：visible”）$elesToHide.slideDown（）更改，我只在那里发布了一个示例，我还执行其他一组代码来切换可见性！请看一看我更新的问题，没有HTML5&没有通用选择器，谢谢。我想减少html和JS文件中的代码，我想尽量从这两个文件中去掉映射，并将其放在一个单独的obj/JS文件itsef中，这将模拟一个表/引用。请看一看我更新的问题，没有HTML5和通用选择器，Thanks@rps编辑了答案。也谢谢您的编辑，但请不要绑定事件（我不是固执的，我只是想在html标记上看到一个onclick，因为我自己的原因），也不要
数据-
属性，
attr（）
可能会捕捉到它，但是，如果我不使用HTML5，那么我不想误导任何人，让他们以为我只看了一眼就做到了，基本上我想要的与@Prasanth的答案有点类似，我不担心事件处理，而是担心映射这是最接近我想要的，我也不想提及“规则”、“家”。。等…等…现在调用函数时，正如我在问题中提到的，我不想绑定事件，因此如果您能想出一些解决方法，这将是有用的，嗯，我不需要数字，相反，我将为
li
分配一个id，并将获取该id，这没有问题，但是告诉我，我要在哪里写额外的代码，就像我在开关箱里写的那样？？我仍然必须使用这种逻辑，不是吗？如果你对我仍然足够耐心，我想知道是否有任何方法可以避免编写公共代码
$c.load（map[option]）它不应该在开关盒之前或之后，如果出现
默认值
情况，它也不应该执行，对此有什么想法吗？你能删除第一次编辑，我会将其标记为答案吗？我也在使用普通代码的下拉开关盒（没有其他额外代码）。
if(!$elesToHide.is(":visible"))
            $elesToHide.slideDown();

<li onclick="changeContentTo('content.htm');">About Us</li>
 <li onclick="changeContentTo('actsAndRules.htm');">Rules</li>



$c.load(parameterOfFunction ) ; 

<li clickable load-link="content.htm">About Us</li>
<li clickable load-link="actsAndRules.htm">Rules</li>

$(function(){
 $('clickable').click(function(e){
  e.preventDefault();
  $c.load($this.data('location') ) ;
 });
});

var $map = {'rules': 'actsAndRules.html', 'home': 'content.html'};

$c.load($map[$arg]);

var $flag = false;
// your switch
...
case default:
    $flag = true;
    break;
...

// after switch
if (!$flag) {
// common code.
}