Question

我点击它时试图改变按钮的颜色。所以我写了这个程序。

＆＃13;

$(document).ready(function() {
  var myprojects_button = document.getElementById("myprojects_button");
  $(myprojects_button).click(function() {
    $("myprojects_text").css("color: #cd1692");
  });
});

＆＃13;

.myprojects_div {
  display: flex;
  flex-direction: column;
}

.myprojects_text {
  display: inline-block;
  font-size: 16px;
  font-family: "Arial Round MT Bold";
  color: #ffffff;
  line-height: 1.2;
  padding-top: 0px;
  margin-left: 10px;
  z-index: 2;
}

.fa.fa-list-alt {
  color: #ffffff;
}

.btn.btn-primary.btn-lg {
  background-color: #1b191a;
  border: #1b191a;
  height: 49px;
}

.btn.btn-primary.btn-lg:hover,
.btn.btn-primary.btn-lg:focus,
.btn.btn-primary.btn-lg:active {
  box-shadow: none;
  color: #8e8e8e;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myprojects_div" class="myprojects_div">
  <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#">
    <i class="fa fa-list-alt" aria-hidden="true"></i>
    <p class="myprojects_text">My projects<p>
  </button>
</div>

＆＃13;

但是当我点击按钮时，颜色不会改变。我该如何解决这个问题？

Answer 1

你错过了班级名称的点，另外你不需要那样获得ID ::

$(document).ready(function(){
 $("#myprojects_button").click(function(){
   $(".myprojects_text").css("color","#cd1692");
 }); 
});

Answer 2

$(".myprojects_text").css("color","#cd1692");使用您必须添加的类选择元素。在课前名称

$(document).ready(function(){
  var myprojects_button = document.getElementById("myprojects_button");
  $(myprojects_button).click(function(){
      $(".myprojects_text").css("color","#cd1692");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myprojects_div" class="myprojects_div">
 <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#">
  <i class="fa fa-list-alt" aria-hidden="true"></i><p class="myprojects_text">My projects<p>
 </button>

Answer 3

这是您的解决方案 -
将下面的代码复制到.html文件中并在浏览器上打开 -

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style type="text/css">

            .myprojects_div {
                display: flex;
                flex-direction: column;
            }

            .myprojects_text {
                display: inline-block;
                font-size: 16px;
                font-family: "Arial Round MT Bold";
                color: #ffffff;
                line-height: 1.2;
                padding-top: 0px;
                margin-left: 10px;
                z-index: 2;
            }

            .fa.fa-list-alt {
                color: #ffffff;
            }

            .btn.btn-primary.btn-lg {
                background-color: #1b191a;
                border: #1b191a;
                height: 49px;
            }

            .btn.btn-primary.btn-lg:hover,
            .btn.btn-primary.btn-lg:focus,
            .btn.btn-primary.btn-lg:active {
                box-shadow: none;
                color: #8e8e8e;
                cursor: pointer;
            }
        </style>

    </head>
    <body>

        <div id="myprojects_div" class="myprojects_div">
            <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#">
                <i class="fa fa-list-alt" aria-hidden="true"></i>
                <p class="myprojects_text">
                    My projects
                <p>
            </button>
        </div>

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

        <script>
            $(document).ready(function(){

                var myprojects_button = document.getElementById("myprojects_button");
                $(myprojects_button).click(function(){
                    $(".myprojects_text").css("color","#cd1692");
                });
            }); 
        </script>

    </body>
</html>

Answer 4

在jquery中正确检查语法。只更改脚本。你错过了对于类而且你的.css（）也是错误的

＆＃13;

$(document).ready(function() {
  $("#myprojects_button").click(function() {
    $(".myprojects_text").css("color","#cd1692");
  });
});

＆＃13;

.myprojects_div {
  display: flex;
  flex-direction: column;
}

.myprojects_text {
  display: inline-block;
  font-size: 16px;
  font-family: "Arial Round MT Bold";
  color: #ffffff;
  line-height: 1.2;
  padding-top: 0px;
  margin-left: 10px;
  z-index: 2;
}

.fa.fa-list-alt {
  color: #ffffff;
}

.btn.btn-primary.btn-lg {
  background-color: #1b191a;
  border: #1b191a;
  height: 49px;
}

.btn.btn-primary.btn-lg:hover,
.btn.btn-primary.btn-lg:focus,
.btn.btn-primary.btn-lg:active {
  box-shadow: none;
  color: #8e8e8e;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myprojects_div" class="myprojects_div">
  <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#">
    <i class="fa fa-list-alt" aria-hidden="true"></i>
    <p class="myprojects_text">My projects<p>
  </button>
</div>

＆＃13;

Answer 5

如果您想要更改文字颜色

$(document).ready(function(){
    $("#myprojects_button").click(function(){
        $(this).find("p").css('color', '#cd1692'); 
        // Or change background-color
        $(this).css('background-color', '#cd1692');
    });
});

Answer 6

描述了{。{3}} .css（）的正确用法只需将javascript部分更改为：

$(document).ready(function() {
     $("#myprojects_button").click(function() {
        $(".myprojects_text").css("color","#cd1692");
     });
   });

Answer 7

将此方法应用于您可能对您有帮助的代码。

- 脚本部分

  <script>
 $(document).ready(function(){
$("#btn").click(function(){
    $(".hey").css("background-color","red");
});
});
</script>

- HTML部分

 <body>
  <p class="hey">Hello</p>

  <input type="button" id="btn" value="click"/>
  </body>

使用jquery单击按钮时如何更改文本的颜色？

7 个答案: