jQuery - 如何防止突出顯示第二段（「點擊」）

我有兩個函數，一個動態創建段落，另一個函數選擇（「更改背景色」）並取消選擇「更改爲默認背景色」）。我遇到的問題是，我可以同時選擇所有段落，並且希望能夠一次選擇一個段落，當然，在取消選擇已選段落之後。jQuery - 如何防止突出顯示第二段（「點擊」）

如何防止在已選擇/突出顯示一個段落時選擇/突出顯示另一個段落？

你可以在這裏檢查出完整的源代碼：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":""}); 


} 
    }); 



});

如果我很清楚，請大家幫忙！您將不勝感激！

來源

2012-04-28 user1362002

只需添加一個標誌，像這樣：

$(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

來源

2012-04-28 01:27:21 adeneo

多數民衆贊成正是我一直在尋找，我絕不會想到，因爲我是新來的jQuery添加一個標誌。非常感謝 – user1362002 2012-04-28 05:03:43

您應該使用CSS風格你選擇的項目。每個選定的項目可以被賦予一個「選擇」的CSS類。點擊後，您可以從所有元素中移除該類，然後將該類添加到單擊的元素上。

.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-28 01:35:06

我想了解的問題。從我可以收集的內容來看，您希望在任何給定時間只選擇一個段落，但可以添加和段落。如果是這樣的話，我相信下面的完成這樣的：

$("#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-28 01:44:16 Sampson

jQuery - 如何防止突出顯示第二段（「點擊」）

回答

相關問題