0

ボタンごとに1つではなく、1つのonclick関数を使用して、特定のhtmlファイルをコンテナDIVに動的にロードしようとしています。

私はこれにかなり慣れていません (AJAX または JQuery を使用するのは初めてです)。

$(document).ready(function(){

$("#container").load("home.html");

$("#home").click(function(){
    $("#container").load("home.html");
});
$("#news").click(function(){
    $("#container").load("news.html");
});
$("#about").click(function(){
    $("#container").load("about.html");
});
$("#contact").click(function(){
    $("#container").load("contact.html");
});
});

ご覧のとおり、今のところ、一意の ID とそれぞれの機能を持つ 4 つのボタンがあります。しかし、私がやりたいのは、これを単純化し、各ボタンの ID を受け取り、それをコンテナーにロードするページの URL として使用する単一の関数を作成することです。つまり、URL = ID + ".html" です。

これにより、ポートフォリオの新しいエントリごとにスクリプトを追加する必要がなくなります。

どうすればこれを行うことができるかについて誰にもアイデアがありますか?

ありがとう！

4

2 に答える 2

0

あなたはこれを行うことができます：

$("#home, #news, #about, #contact").click(function(){ 
    $("#container").load(this.id+".html");
}

しかし、正しいことは id の代わりに属性を使用することです:

<div link=home>something</div>
...
$("[link]").click(function(){ 
    $("#container").load($(this).attr('link')+".html");
}

そうすれば、リンクを追加するたびにセレクターを変更する必要がなくなります。

于 2012-12-30T11:42:23.557 に答える
0

すべてのボタンに単一のクラスを使用します。

$(".myButtons").click(
   function(){
   id = $(this).attr("id");
   $("#container").load(id + ".html");  
}
);
于 2012-12-30T11:47:41.030 に答える