如何使用 jQuery 在双击时更改段落的背景颜色？

在本文中，我们将看到如何使用 jQuery 更改段落的背景颜色。要更改背景颜色，我们使用 on() 方法。 on() 方法用于监听元素上的事件。这里我们将使用dblclick事件。为了改变背景颜色，我们将使用 css() 方法。这个方法可以帮助我们动态添加 CSS 属性。有关更多详细信息，您可以参考这篇文章。

句法 ：

$("p").on({
    dblclick: function(){
        $(this).css("property", "value");
    }
});

这里我们在 body 标签内创建了一个段落，即

元素。我们在上面添加了一个双击事件。如果有人双击该段落，背景颜色将根据给定值切换。

示例 1：在此示例中，我们将使用 css() 方法为段落元素动态添加背景颜色。

HTML

  

    
    
  
    
        $(document).ready(function () {
            var toggle = true; // Toggle state
            $("p").on({
                dblclick: function () {
                    if (toggle) {
                      
                        // Change background to red
                        $(this).css("background-color", "red");
                        toggle = false;
                    } else {
  
                        // Change background to default
                        $(this).css("background-color", "white");
                        toggle = true;
                    }
                }
            });
        });
    

  

    Double click to change background color

  

输出：

示例 2：在本示例中，我们将使用 addClass() 和 removeClass() 方法动态添加或删除 CSS。

HTML

  

    
    
  
    
        .toggle {
            background-color: green;
        }
    
  
    
        $(document).ready(function () {
            var toggle = true; // Toggle state
            $("p").on({
                dblclick: function () {
                    if (toggle) {
  
                        // Add class toggle to the paragraph
                        $(this).addClass("toggle");
                        toggle = false;
                    } else {
  
                        // Remove class toggle to the paragraph
                        $(this).removeClass("toggle");
                        toggle = true;
                    }
                }
            });
        });
    

  

    Hello GeeksforGeeks

  

输出：