要素の追加と操作

私のテストサイトhereを参照してください。要素の追加と操作

このスクリプトは<head>に書かれているため、そこに表示されます。

手順

あなたは新しい要素が作られる青色の領域をクリックした場合。これを4〜5回行います。今作成したすべての要素をクリックします。彼らはすべて黒い輪郭を持つべきです。しかし、あるものとそうでないものがあります。

追加情報：

のみ、これまでChromeでテストしました。

ここで何が問題になっているかについてのアイデアはありますか？

出典

2011-07-12 Gary Ryan

作成されたバブルの数に応じて、クラスが偶数バブルまたは奇数バブルにのみ追加されます。ソースを見ると、あなたはそれを削除する前に 'active'クラスを設定しないことと関係があると思います。 –

にクリックリスナーを追加しています。新しいものが作成されるたびにがバブルします。

リスナーをliveリスナーで1回追加します。いずれかのバブルが作成される前に設定できます。

数字のid属性は使用しないでください。これはHTMLによって許可されていません。

さらに、クラスを切り替えると、これに対応する関数が短くなります。toggleClass

出典

2011-07-12 19:54:57 katspaugh

あなたはこれを使用して簡素化することができます。

$(function() { 
    // CREATE A NEW BUBBLE 

    $('.drop').click(function(event){ 
    Bubble(event); 
    }); 

    var newBubbleId = 0; 
    function Bubble(event,bubbleClass){ 
    // Create Element 
    var id = newBubbleId++; 
    var bubble = $('<div class="bubble" id="b_'+id+'" draggable="true"><input id="bubbleText" type="text" name="text" value="'+id+'" /></div>'); 
    $('body').append(bubble); 

    // Position Element 
    var bubbleWidth = bubble.width(); 
    var bubbleHeight = bubble.height(); 
    var x = event.pageX - (bubbleWidth*0.5); 
    var y = event.pageY - (bubbleHeight*0.5); 
    bubble.offset({top:y, left:x}); 
    bubble.click(function() { 
     $(this).toggleClass("active"); 
    }); 
    } 

});

は、私はいくつかの他の問題を参照してください。前述の番号のIDまた、すべての入力要素は同じIDを持ちますが、これは許可されていません。 1つのドキュメントにつき1つのIDのみ。同じ名前を使用する場合は、Name属性を使用できます。

また、カウンタ機能は理想的ではありません。

しかし、これはあなたの問題を解決するはずです。

出典

2011-07-12 20:09:33

ありがとう、非常に有効かつ簡単な解決策。私は知っている、私のコードは本当にこの時点でうんざりで、整頓されます。 –

答えて

関連する問題