jQuery - 当一个已经突出显示（“点击”）时，如何防止第二个段落被突出显示答案

【问题标题】：jQuery - How do I prevent for a second paragraph to be highlighted when one is already highlighted ("clicked")jQuery - 当一个已经突出显示（“点击”）时，如何防止第二个段落被突出显示
【发布时间】：2026-01-03 14:10:02
【问题描述】：

我有两个函数，一个是动态创建段落，另一个是选择（“更改背景颜色”）和取消选择（“更改为默认背景颜色”）。我遇到的问题是我可以同时选择所有段落，并且我希望能够一次选择一个段落，当然，在取消选择已经选择的段落之后。

当已经选择/突出显示一个段落时，如何防止另一个段落被选择/突出显示？

您可以在这里查看完整的源代码：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":""});


 }
    });



});

如果我足够清楚，请帮助！您将不胜感激！

【问题讨论】：

标签： jquery paragraph

【解决方案1】：

您应该使用 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/

【讨论】：

【解决方案2】：

只需添加一个标志，如下所示：

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

【讨论】：

这正是我想要的，因为我是 jquery 的新手，所以我从没想过要添加一个标志。非常感谢

【解决方案3】：

我试图理解这个问题。据我所知，您希望在任何给定时间只选择一个段落，但能够添加 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

【讨论】：