2
  1. ID「messagefield」のスパンに 5 つのユーザー フィードバック メッセージを表示したいと考えています。
  2. 最新のものを上にしてスパンを積み重ねたい
  3. スパンが5つ溜まったら外したい --> 次の5つのメッセージに差し替えます。

マークアップにこの最終結果が必要です:

<div class="span4 messageField">
<span id="messagefield">Message 1</span>'
<span id="messagefield">Message 2</span>'
<span id="messagefield">Message 3</span>'
<span id="messagefield">Message 4</span>'
<span id="messagefield">Message 5</span>'
</div>

jquery を使用して、次のように最初のスパン メッセージ フィールドを div に追加しました。

$('.messageField').prepend('<span id="messagefield"></span>');

メッセージフィールドのテキストを生成するクリック関数は次のとおりです。

$("#fireCreate").click(function(e) {
        $("#messagefield").html("Importerar titelsida, vänta ...");
});

これは、html のマークアップです。

<div class="span4 messageField">
<!-- HERE IS WHERE THE SPANS WILL STACK UP -->
</div>
4

1 に答える 1

1

あなたができる

//the counter is here just to show you that this works, you could use this to generate an id
var counter = 0;
$("#fireCreate").click(function(e) {
    counter++;
    if($('.messageField span').length === 5){
        $('.messageField span:last').remove();
    }
    $('.messageField').prepend($('<span />', { id: "message"+counter, class: "singleMessage", text : "Importerar titelsida, vänta ..."+counter}));
});

ここを見てくださいhttp://jsfiddle.net/D4FQd/

于 2012-03-21T16:31:53.147 に答える