0

これは小さな問題かもしれませんが、私はそれを理解することができないので、助けてください. 以下のコードには、テキストエリアとボタンがあります。ボタンの div は、最初は display:none に設定されています。テキストエリアをクリックすると拡大し、ボタンの div が表示されます。 DUPLICATE という名前のリンクがあり、クリックすると同様のテキストエリアとボタンのセットがメイン div に追加されます。ここでの問題は、複数の textarea がある場合の問題です。jquery のクリック関数は、元の textarea でのみ機能し、他のテキストエリアでは機能しません。また、関数の効果はすべてのテキストエリアに反映されます。つまり、すべてのテキストエリアが拡大され、ボタンが表示されます。クリックした特定のテキストエリアだけを拡大して対応するボタンを表示したい。動的 ID の割り当て'

    <script type="text/javascript">
        $(document).ready(function(){
            test={
                btn:function(){
                    $(this).css("height","100px");
                    $(this).parent().siblings(".btn").css("display","block");
                    },
                duplicate:function(e){
                    e.preventDefault();
                    $(".main").append('<div class="child"><textarea name="text" class="text" id="text"></textarea></div><div class="btn"><input type="button" value="Button" /></div>');
                    }

            }
            $("#text").click(test.btn);
            $("#duplicate").click(test.duplicate);
        });
    </script>
    <style type="text/css">
    .btn
    {
        display:none;
    }
    </style>
</head>
<body>
<div class="main">
    <a href="#" id="duplicate">DUPLICATE</a>
    <div class="child">
        <textarea name="text" class="text" id="text"></textarea>
    </div>
    <div class="btn">
        <input type="button" value="Button" />
    </div>
</div>
</body>
</html>
4

2 に答える 2

1

これを試してください、ただ変更してください

$("#text").click(test.btn);

に

$('.main').on('click', '.text', test.btn);

btn機能に変更を加える

btn:function(){
    $(this).css("height","100px");
    $(this).parent().next(".btn").css("display","block"); // this line only
}

またid、ページ上で一意である必要があります。

実施例。

于 2012-09-09T07:06:44.727 に答える
0

実際のデモ http://jsfiddle.net/Y4a7n/

注意事項:

  • idclone を調べることができるすべての要素に対して一意である必要がありますがclass、この場合は使用できます。

  • .onAPIを使用してください- http://api.jquery.com/on/ it - 選択した要素に 1 つ以上のイベントのイベント ハンドラー関数を添付します。

  • 次のボタンをクリックして表示するだけの場合は、Apiを使用する代わりにsiblings試してください。next

それがあなたの原因に合うことを願っています:)

コード

$(document).ready(function() {
    test = {
        btn: function() {

        },
        duplicate: function(e) {
            $(".main").append('<div class="child"><textarea name="text" class="text" ></textarea></div><div class="btn"><input type="button" value="Button" /></div>');
        }

    }

    $("#duplicate").click(test.duplicate);
});

$(document).on('click', '.text', function() {
    $(this).css("height", "100px");
    $(this).parent().next(".btn").css("display", "block");
});​
于 2012-09-09T07:04:34.620 に答える