如何在使用jquery点击按钮时改变文本的颜色？

-1

我试图改变它点击时按钮的颜色。所以我写了这个程序。如何在使用jquery点击按钮时改变文本的颜色？

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

.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; 
 
}

<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>

但是当我点击该按钮，颜色没有变化。我该如何解决这个问题？

来源

2017-04-07 Slim Hmidi

'$（ “myprojects_text。 ”）的CSS（“ 颜色”， “＃cd1692”）;'选择元素使用。你必须在课程名称前添加'.' – Curiousdev

你错过了类选择器中的'.'。 '.css（“color：＃cd1692”）;'应该是'.css（'color'，'＃cd1692'）' - 或者更好的方法是使用一个类。关闭作为错字 –

的.css的正确使用（）被描述here 只需将javascript部分更改为：

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

来源

2017-04-07 10:01:22 AlexVMM

你错过了类名称的点，此外，您不需要获得ID这样::

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

来源

2017-04-07 09:46:20 mayersdesign

HEY？答案有什么问题？ – mayersdesign

对不起，我输入的速度很快！我已经编辑他们了。 – mayersdesign

@mayersdesign仍然缺少一些东西;-) – Curiousdev

$(".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>

来源

2017-04-07 09:48:12 Curiousdev

这里是您的解决方案 -
下面的代码复制到一个.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>

来源

2017-04-07 09:49:49

虽然这段代码可能解决这个问题，但[包括解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有助于提高质量请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 –

检查jQuery的正确语法。只能改变你的脚本。你错过了。对于类也是你的CSS（）也是错误的

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

.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; 
 
}

<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>

来源

2017-04-07 09:54:28

如果你想改变文字颜色

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

来源

2017-04-07 09:58:38

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

- 脚本部分

<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>

来源

2017-04-07 10:11:15

如何在使用jquery点击按钮时改变文本的颜色？

回答

相关问题