jqueryの質問をさせていただきます。


・リンクを押すと、<div id="XXXX1"></div>が生成され、押すたびにxxx2、xxx3と増えていき最大10まで生成するようにはどうしたらよいでしょうか?

どうぞよろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/09/20 16:16:14
  • 終了:2011/09/27 16:20:03

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4488ベストアンサー獲得回数18572011/09/20 17:49:24

ポイント66pt

こんな感じかな?

<script>
var pageNum = 1;
$("#XXXXX").click(function() {
        if (pageNum <= 10) {
            var id = "box" + pageNum;
            $('#YYYY')
                .append('<div id="' + id + '">' + id + '</div>')
                .load("xxxx.php?page=" + pageNum);
            pageNum += 1;
        }
        return false;       // ★ false を返すと、本来の a タグの動作が抑制される
    })
</script>

<a href="about:blank" id="XXXXX">CLICK!</a>
<div id="YYYY"></div>

id:kuso47

ありがとうございます。みなさんから頂いたコードを元に試行錯誤したところ無事解決できました!

var id = "box" + pageNum;

これが解決のヒントになりました!

有難うございました!!!

2011/09/20 19:23:52

その他の回答(2件)

id:Jupiter2100 No.1

じゅぴたー回答回数444ベストアンサー獲得回数742011/09/20 16:40:58

ポイント67pt

aタグだと具合が悪いので、ボタンを押すたびに id="hoge" の中に増えていくようにしました。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
<!--
var Num = 1;
function hoge_append() {
    if (Num <= 10) {
        var id = "XXXX" + Num;
        $('p#hoge').append('<div id="' + id + '">' + id + '</div>');
        Num++;
    }
}
-->
</script>
</head>
<body>
<form>
<input type="button" id="click" onclick="hoge_append()" value="CLICK!" />
</form>
<p id="hoge"></p>
</body>
</html>
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/20 17:32:18

ポイント67pt

jQuery.autopager を利用されてはいかがでしょうか?

jQuery.autopager: Automatic paging plugin for jQuery

 

↓このデモがご要望にあっていると思いました。

jQuery.autopager - Demo

スクラッチで書きたい、というご要望でしたら、お手数ですがポイントを0にしてください。

id:a-kuma3 No.3

a-kuma3回答回数4488ベストアンサー獲得回数18572011/09/20 17:49:24ここでベストアンサー

ポイント66pt

こんな感じかな?

<script>
var pageNum = 1;
$("#XXXXX").click(function() {
        if (pageNum <= 10) {
            var id = "box" + pageNum;
            $('#YYYY')
                .append('<div id="' + id + '">' + id + '</div>')
                .load("xxxx.php?page=" + pageNum);
            pageNum += 1;
        }
        return false;       // ★ false を返すと、本来の a タグの動作が抑制される
    })
</script>

<a href="about:blank" id="XXXXX">CLICK!</a>
<div id="YYYY"></div>

id:kuso47

ありがとうございます。みなさんから頂いたコードを元に試行錯誤したところ無事解決できました!

var id = "box" + pageNum;

これが解決のヒントになりました!

有難うございました!!!

2011/09/20 19:23:52
  • id:taknt
    最初は ×が 4つで 次は ×が 3つですか?
  • id:kuso47
    すいません、xはずっと同じです。 box1、box2~box10といった感じです。ボタンではなくリンクで動作するようなものが欲しいのですが。。
  • id:Jupiter2100
    >ボタンではなくリンクで動作するようなものが欲しいのですが。。
    リンクにしてしまうとページ遷移が発生しますので、クライアントサイド(JavaScript)ではなく、サーバサイドでの処理にするのが定石です。

    ページ遷移が発生しても良いのでどうしても、ということでしたら値渡しの必要があります。GETで渡して良いですか?
  • id:kuso47
    お返事有難うございます。

    .load("xxxx.php?page=" + Num);

    の形でページを読み込みたいと思っています。

    現状、このような汚い形でなら実装ができているのですが、なんとかスッキリさせたくどうかよろしくお願いします。


    $("#XXXXX").toggle(function(){
    $('<div />', {id: 'box'}).appendTo('#YYYY');
    pageNum ++;
    $("#box").load("xxxx.php?page=" + Num);

    },function(){
    $('<div />', {id: 'box2'}).appendTo('#box');
    pageNum ++;
    $("#box2").load("xxxx.php?page=" + Num);
    },function(){
    $('<div />', {id: 'box3'}).appendTo('#box2');
    pageNum ++;
    $("#box3").load("xxxx.php?page=" + Num);
    });
  • id:kuso47
    ありがとうございます。みなさんから頂いたコードを元に試行錯誤したところ無事解決できました!
    var id = "box" + pageNum;
    これが解決のヒントになりました!
    有難うございました!!!

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません