3

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":""});


 }
    });



});

私が十分に明確だったら、助けてください！あなたは感謝されます!

4

3 に答える 3

2

選択した項目のスタイルを設定するには、css を使用する必要があります。選択された各項目には、css クラス "selected" を指定できます。クリックすると、そのクラスをすべての要素から削除してから、クリックした要素にクラスを追加できます。

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

JavaScript の場合:

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/

于 2012-04-28T01:35:06.007 に答える
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;
       }
  });
});

フィドル

于 2012-04-28T01:27:21.503 に答える
0

私は質問を理解しようとしています。私が収集できることから、任意の時点で選択できる段落は 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

于 2012-04-28T01:44:16.673 に答える