如何在使用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點擊按鈕時改變文本的顏色？

回答

相關問題