如何给jQuery中的变量赋予样式？

Question

我试图改变每次点击按钮的颜色。在我的代码中，linkNumber会得到一个值。我想给它一个颜色。我做的方式不起作用。我对警报进行了测试，以确保值和它正在工作。

var linkNumber = $(this).text(); 
       $(linkNumber).css("color", "yellow"); 
       alert(linkNumber); 

Answer 1

看来你试图在文本本身设置颜色。文字不能有颜色。 集装箱（标签）可以有css。所以只需将css颜色设置为容器。

$(this).css('color', 'yellow'); 

Answer 2

这里有几个按钮改变颜色的活生生的例子：

var colors = ["yellow", "red", "blue"]; 
 

 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var currentIndex = Number($(this).data("ci")) || 0; 
 
    var nextIndex = (currentIndex + 1) % colors.length; 
 
    $(this).data("ci", nextIndex).css("color", colors[nextIndex]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Button 1</button> 
 
<button>Button 2</button> 
 
<button>Button 3</button>

在第一次点击，按钮被假定为目前拥有colors[0]。数组索引递增并存储在按钮中，然后将颜色分配给它。

Answer 3

在这个例子中，点击按钮时，如果你想改变你必须使用的按钮里面的文本的颜色，那么按钮的背景颜色将会改变。color：cyan; insted的背景色：青财产

CSS

.clickme{ 
background-color:cyan; 
color:White; 
} 

HTML

<button class="clickme">button1</button> 
<button class="clickme">button2</button> 
<button class="clickme">button3</button> 

jQuery函数用于掣子元件

$(".clickme").click(function(){ 
$(this).css("background-color","green"); 
}); 

Here is the Working fiddle

Answer 4

您可以直接追加风格this.style.color = 'yellow';

我同样会建议对目前使用jQuery。

Array.from(document.querySelectorAll('button')) 
 
    .forEach(button => (button.addEventListener('click', (e) => { 
 
    e.target.style.color = 'red'; 
 
    })));

<button>button1</button> 
 
<button>button2</button>