jQuery - 既に強調表示されているときに2番目の段落がハイライト表示されないようにするにはどうすればいいですか？

Question

2つの機能があり、1つは段落を動的に作成し、もう1つの機能は背景色を選択し、 "デフォルトの背景色に変更"）。私が持っている問題は、すべての段落を同時に選択することができ、すでに選択されている段落の選択を解除した後、一度に1段落を選択できるようにすることです。

すでに選択/強調表示されている段落が選択/強調表示されるのを防ぐにはどうすればよいですか？あなたがここに完全なソースコードをチェックアウトすることができ

：http://jsfiddle.net/2QqmN/1/

のjQueryコード：私は十分に明らかになった場合

$(document).ready(function(){ 
var count = 1; 
$("#add").on(
    "click", function(){ 
     $("#a").append('<p>Paragraph ' + count + '</p>'); 
    count++; 

    }); 
$("#a").on("click", "p", function(){ 
var bg = $(this).css("background-color"); 


    if(bg=="rgb(255, 255, 255)") { 
     $(this).css({"background-color":"green", "color":"white"}); 

    } 

else { 

    $(this).css({"background-color":"white","color":""}); 


} 
    }); 



}); 

を、助けてください！ あなたは高く評価されます！

Answer 1

ただ、そうのように、フラグを追加します。

$(document).ready(function(){ 
var count = 1, flag = false; 
    $("#add").on("click", function(){ 
     $("#a").append('<p>Paragraph ' + count + '</p>'); 
     count++; 
    }); 
    $("#a").on("click", "p", function(){ 
     var bg = $(this).css("background-color"); 
     if(bg=="rgb(255, 255, 255)") { 
      if (flag==false) { 
       $(this).css({"background-color":"green", "color":"white"}); 
       flag=true; 
      } 
     } else { 
      $(this).css({"background-color":"white","color":""}); 
      flag=false; 
     } 
    }); 
}); 

FIDDLE

Answer 2

あなたはあなたの選択した項目をスタイルにCSSを使用する必要があります。選択された各項目には、「選択済み」というCSSクラスが与えられます。クリックすると、そのクラスがすべての要素から削除され、クリックされた要素にクラスが追加されます。 JavaScriptが

.selected { background-color: green; color: white; } 

：

var count = 1; 
$("#add").on("click", function() { 
    $("#a").append('<p>Paragraph ' + count + '</p>'); 
    count++; 
}); 

$("#a").on("click", "p", function() { 
    $(".selected").removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

http://jsfiddle.net/2QqmN/6/

Answer 3

私は質問を理解しようとしています。私が集めることのできるところから、いつでも段落を1つだけ選択することができますが、nの段落を追加することができます。このような場合は、私は以下のが、この実現信じる：

$("#a").on("click", "p", activateParagraph); 
$("#add").on("click", addParagraph); 

function addParagraph() { 
    $("<p>", { text: 'Paragraph ' + $("#a p").length++ }) 
    .appendTo("#a"); 
} 

function activateParagraph() { 
    $(this) 
    .addClass("on") 
    .siblings(".on") 
     .removeClass("on"); 
} 

デモ：私が探していたまさにhttp://jsbin.com/uziheg/2/edit