Question

所以我在一个段落中有一个按钮。当用户按下按钮时，我希望它改变它所在的特定段落的背景颜色。这是我到目前为止的JQuery：

$('<button/>',
    {
        text: "Done",
        click: function () {
            $("p:first").addClass("first");
            $(".first").css({ 'background-color': 'green' });
        }
    });

我的想法是首先将段落放入特定的类，然后给它一个背景颜色。但是我的按钮不起作用，当我检查控制台时，我没有收到任何错误。还有什么我可以尝试的吗？

Answer 1

Question的当前button jQuery对象没有p子元素。

尝试用html:代替text:;将"Done"字符串包裹在<p></p>内;在context事件中的选择器上使用click来引用this button元素;使用.appendTo()将jQuery对象button附加到文档

＆＃13;

$("<button/>", {
  html: "<p>Done</p>",
  click: function() {
    $("p:first", this).addClass("first");
  }
}).appendTo("body")

＆＃13;

.first {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

＆＃13;

Answer 2

你可以这样做。使用closest功能查找父p和css功能以更改背景颜色。

＆＃13;

$("button").click(function () {
     $(this).closest('p').css('background-color', 'red');
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <button>Click</button>
</p>

＆＃13;

Answer 3

你可以这样做

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.myclass
{
  background-color: yellow;
}
.newclass
{
  background-color: red;
}
</style>
</head>

<body>
<p class="myclass">This is a paragraph.
<button id="changecolor"> change color </button>
</p>
<script>
$('#changecolor').click(function()
{
$(this).parent().removeClass('myclass').addClass('newclass');
}

);
</script>
</body>
</html>

Answer 4

当用户按下按钮时，我希望它改变它所在的特定段落的背景颜色。

以下代码可以完成工作！

＆＃13;

$('p button').click(function(){
  $(this).parent('p').css('backgroundColor', 'yellow');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  <button>Click Me</button>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

<p>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  <button>Click Me</button>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

<p>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  <button>Click Me</button>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

＆＃13;

在JQuery中更改段落的颜色

4 个答案: