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

試す

<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);
        }
    });
});

各要素で inline を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 に答える
0

辞書を定義しますか?

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

今、スイッチの代わりに直接することができます

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

$argあなたの関数の引数名を仮定します。

編集

switch ケースのいずれかが満たされた場合にのみコードを実行するには、次のようにします。

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 に答える