如何在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; 由background-color：cyan属性插入

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");
});

这是工作小提琴

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>