jQueryでaリンクにイベントを設定するモダンな書き方を教えてください



リンクにクリックイベントを設定するとき
最初
<a href="#" onClick="jump(1);">ページ1</a>
<a href="#" onClick="jump(2);">ページ2</a>

function jump(page) {
  location.href = 'http://hoge' + page;
}

としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました


$(function(){
  $("#one").click(function(){
    location.href = 'http://hoge' + 1;
  });
  $("#two").click(function(){
    location.href = 'http://hoge' + 2;
  });
});

<a href="#" onClick="jump();" id="one">ページ1</a>
<a href="#" onClick="jump();" id="two">ページ2</a>


としたのですが、なんか冗長な気がします。どのように書くのがスマートでしょうか。
aリンクのhref属性が「#」になってしまっているのも微妙な気がします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/11/20 19:00:20
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Lhankor_Mhy No.1

回答回数816ベストアンサー獲得回数233

ポイント100pt

 モダンなのかどうか分かりませんが、自分ならこう書きます。

$(function(){
    $(".jump").on('click',function(event){
        event.preventDefault();
        event.stopPropagation();
        location.href = 'http://hoge' + $(this).attr('href');
        return false;
    });
});
<a href="1" class="jump">ページ1</a>
<a href="2" class="jump">ページ2</a>
他3件のコメントを見る
id:Lhankor_Mhy

その動作で質問文通りだと思うのですが、

'http://hoge'

を以下の通りに修正すると、

'http://hoge/'

想定されている動作になりますか?

2013/11/20 16:14:29
id:anesawa

申し訳ありません。
肝心の$(function(){}を記述し忘れイベント自体がうまく設定できていませんでした。
うまく動きました。ありがとうございます。

2013/11/20 16:31:19

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません