3 页面有5个p段落，点击每个p段落的时候打印p段落内容和设置背景色红色，使用css函数和html函数

好的，下面是使用 jQuery 实现点击每个 p 段落时打印内容和设置背景色为红色的代码：

HTML 代码：

<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<p>第五个段落</p>

jQuery 代码：

$("p").click(function() {
  console.log($(this).text());
  $(this).css("background-color", "red");
});

解释：

1. `$("p")` 选择所有的 p 元素。

2. `.click()` 给每个 p 元素添加点击事件。

3. `$(this).text()` 获取当前点击的 p 元素的文本内容，并使用 `console.log()` 函数打印出来。

4. `$(this).css("background-color", "red")` 设置当前点击的 p 元素的背景色为红色。

相关问题

页面有5个p段落，点击每个p段落的时候打印p段落内容和设置背景色红色，使用css函数和html函数

好的，让我来为你解答。

首先，我们需要在 HTML 中创建 5 个 `<p>` 段落，并为它们添加一个共同的类名，比如 `p-class`。代码如下：

<p class="p-class">第一个段落</p>
<p class="p-class">第二个段落</p>
<p class="p-class">第三个段落</p>
<p class="p-class">第四个段落</p>
<p class="p-class">第五个段落</p>

接下来，我们可以使用 jQuery 的 `click()` 函数来为每个段落添加点击事件，并在点击时执行相应的操作。代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".p-class").click(function() {
      var content = $(this).text();
      console.log(content);
      $(this).css("background-color", "red");
    });
  });
</script>

上面的代码中，我们首先引入了 jQuery 库，然后在文档准备就绪时，为所有带有 `p-class` 类名的段落添加了一个 `click()` 事件。在事件处理程序中，我们首先使用 `$(this).text()` 获取当前段落的文本内容，并将其打印到控制台中。然后，我们使用 `$(this).css("background-color", "red")` 将当前段落的背景色设置为红色。

这样，当你点击每个段落时，就会打印出段落的文本内容，并将其背景色设置为红色。

页面有5个p段落,使用css函数和html函数点击每个p段落的时候打印p段落内容和设置背景色红色,

好的，为您提供代码如下：

HTML代码：

<p id="p1">第一个p段落</p>
<p id="p2">第二个p段落</p>
<p id="p3">第三个p段落</p>
<p id="p4">第四个p段落</p>
<p id="p5">第五个p段落</p>

JavaScript代码：

// 获取所有p段落元素
var pList = document.getElementsByTagName("p");

// 为每个p段落元素添加点击事件
for (var i = 0; i < pList.length; i++) {
  pList[i].onclick = function() {
    var content = this.innerHTML; // 获取当前p段落的内容
    console.log(content); // 控制台输出p段落内容
    this.style.backgroundColor = "red"; // 设置背景色为红色
  }
}

当您点击每个p段落时，将会在控制台输出该段落的内容，并将背景色设置为红色。