0

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

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

映射是使用 switch case 完成的

    case "rules":
         /* something here */
         $c.load("actsAndRules.htm" ) ;
         break;
    case "home":
         /* something else here*/
         $c.load("content.htm" ) ;       
         break;

我想知道有没有更好/正确的方法来做到这一点？

例如，我不想将单击事件绑定到选择器$('.myLink').click()并且没有 HTML5 编码，事件处理将与上面相同

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

4

6 回答 6

0

定义字典？

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

现在，您可以直接代替 switch

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

假设$arg是您的函数参数名称。

编辑

要仅在满足任何开关情况时运行代码，您可以执行以下操作：

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

// after switch
if (!$flag) {
// common code.
}
于 2013-08-05T06:24:30.367 回答
0

试试看，

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>
于 2013-08-05T06:21:53.220 回答
0

尝试

<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') ) ;
    })
})
于 2013-08-05T06:22:52.147 回答
0 
<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 的“data-”属性也不会成为问题。在 ASP.Net 中，属性按原样传递给客户端。只需将不需要处理的值留空即可。

如果您不想绑定 click on li，则可以使用 event-delegation 将其绑定到父级：

<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 文件中。

于 2013-08-05T06:23:46.067 回答
0 
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 ) ;
于 2013-08-05T06:23:58.393 回答
0 
<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') ) ;
 });
});
于 2013-08-05T06:24:00.113 回答