好的，基本上，当我点击一个菜单选项时，在执行了一些其他代码集后，相应的html会加载到布局页面的内容块中，现在我已经将每个菜单选项的点击事件映射到它相应的代码集，如下所示执行；
<li onclick="changeContentTo('home');">About Us</li>
<li onclick="changeContentTo('rules');">Rules</li>
使用交换机案例完成映射
case "rules":
/* something here */
$c.load("actsAndRules.htm" ) ;
break;
case "home":
/* something else here*/
$c.load("content.htm" ) ;
break;
我想知道有没有更好/合适的方法来做这件事？
我不想将点击事件绑定到选择器，例如$('.myLink').click()，并且没有HTML5编码，事件处理将与上述相同
基本上，我想要的是从代码中尽可能多地去除映射，并将其放在一个单独的obj中（可能位于一个独立的JS文件中），这将模仿映射的表/引用，即如果我要更改映射，我只需要更新那个假表。
定义字典？
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.
}
试试吧，
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>
尝试
<li class="nav-item" data-location="content.htm">About Us</li>
<li class="nav-item" data-location="actsAndRules.htm">Rules</li>
然后
$(function(){
$('.nav-item').click(function(){
if(!$elesToHide.is(":visible")){
$elesToHide.slideDown();
}
$c.load($this.data('location') ) ;
})
})
if(!$elesToHide.is(":visible"))
$elesToHide.slideDown();
这部分似乎总是一样的。把它放在你的switch部分之前。
然后，它只能归结为区分url。你可以直接通过：
<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') ) ;
});
});
<li id="l1" class="menuItem" data-item="home.htm" ></li>
<li id="l2" class="menuItem" data-item="actsAndRules.htm" ></li>
<li id="l3" class="menuItem" data-item="content.htm" ></li>
$(document).ready(function(){
$('.menuItem').click(function(e){
$c.load($(this).attr('data-item'));
});
});
编辑：
即使你没有使用HTML5，HTML5的"数据-"属性也不会成为问题。在ASP.Net中，属性按原样传递给客户端。只需在不需要处理的地方将值留空即可。
如果您不想绑定，请单击li，然后可以使用事件委派将其绑定到父级：
<ul id="list">
<li.....
<li.....
</ul>
$(document).ready(function(){
$('#list').click(function(e){
var $elem = $(e.target);
var content = $elem.attr('data-item');
if ($.trim(content)) {
$c.load(content);
}
});
});
将click绑定到选择器比与每个元素内联地指定onclick更可取。
您可以很容易地将该片段包装到一个函数中，并将其单独存储在外部js文件中，以便从这里调用。