页面有5个p段落,点击每个p段落的时候打印p段落内容和设置背景色红色,使用css函数和html函数
时间: 2024-02-22 22:54:58 浏览: 15
好的,让我来为你解答。
首先,我们需要在 HTML 中创建 5 个 `<p>` 段落,并为它们添加一个共同的类名,比如 `p-class`。代码如下:
```html
<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()` 函数来为每个段落添加点击事件,并在点击时执行相应的操作。代码如下:
```html
<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")` 将当前段落的背景色设置为红色。
这样,当你点击每个段落时,就会打印出段落的文本内容,并将其背景色设置为红色。