使用 jQuery Switch Case 更改文本颜色答案

【问题标题】：Using jQuery Switch Case to Change text Color使用 jQuery Switch Case 更改文本颜色
【发布时间】：2014-09-19 22:36:54
【问题描述】：

以下脚本实现了更改锚标记中包含的单词颜色的目标，但是我想让我的脚本更优雅。如何在 jQuery 中使用 switch case 语句编写以下脚本？

//change color of categories
    jQuery("a:contains('Strawberries')").css("color","#34a07e");

    jQuery("a:contains('Apples')").css("color","#3194b1");

    jQuery("a:contains('Peaches')").css("color","#e1a82a");

    jQuery("a:contains('Bananas')").css("color","#ff0b00");

HTML：

<a title="Fruits in basket Strawberries" href="#">Strawberries</a>

<a title="Fruits in basket Apples" href="#">Apples</a>

<a title="Fruits in basket Peaches" href="#">Peaches</a>

<a title="Fruits in basket Bananas" href="#">Bananas</a>

【问题讨论】：

标签： jquery switch-statement

【解决方案1】：

好吧，我没有使用开关/外壳，但这是一种更优雅的方式来做你想做的事。点击下方按钮运行并查看结果。

创建一个将文本名称映射到所需颜色的对象。
使用jQuery.each循环遍历每种颜色（与jQuery(selector).each不同。这将遍历一个对象或一个数组（在本例中为一个对象），并运行相关的函数。每次运行时函数，它会将当前的键和值传递给函数。所以第一次迭代，key = 'Strawberries' 和 value = '34a07e'。
对于每种颜色，将所有匹配元素的 css 更改为所需的颜色。

jQuery(function ($) {
	var colors = {
		"Strawberries" : "#34a07e",
		"Apples" : "#3194b1",
		"Peaches" : "#e1a82a",
		"Bananas" : "#ff0b00"
	};

	$.each(colors, function (key, value) {
		$(":contains(" + key + ")").css('color', value);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Fruits in basket Strawberries" href="#">Strawberries</a>

<a title="Fruits in basket Apples" href="#">Apples</a>

<a title="Fruits in basket Peaches" href="#">Peaches</a>

<a title="Fruits in basket Bananas" href="#">Bananas</a>

【讨论】：

嗨 Manishie，感谢您回复我的帖子。我注意到您将变量 k,v 传递给 $.each 函数这些变量代表什么？
我应该问的是它是如何工作的？换句话说，jQuery 如何知道将键与特定单词（例如“Apples”）关联，将值与特定颜色“#3194b1”关联？再次感谢它完美无缺。

【解决方案2】：

你可以试试：

function switchLinkColor (fruit, color) {
   switch(fruit){
      case Strawberries: 
         $("a:contains('"+fruit+"')").css("color", color);
         break;
      case Apples: 
         $("a:contains('"+fruit+"')").css("color", color);
         break;
      case Peaches: 
         $("a:contains('"+fruit+"')").css("color", color);
         break;
      case Bananas:    
         $("a:contains('"+fruit+"')").css("color", color);
         break; 
    }

}
switchLinkColor("Apples", "#ff0000");

但这显然并没有太大的改进......仍然过于重复和限制。

我建议 switch case 可能不是最好的方法，因为它不是很灵活或可扩展的。每次添加新水果时，您都需要添加一个新箱子！此外，如果您执行所有这些以更改每个链接，那么实际上没有“条件”首先需要if/else 或switch。

一个接受 2 个参数的函数：

要匹配的单词和
您想将其更改为的新链接颜色

http://jsfiddle.net/gexr574g/

function changeLinkColor (word, hexColor){
    $("a:contains("+word+")").css("color", hexColor);
}

然后您可以单独调用此函数来一次更改一个链接...

changeLinkColor("Strawberries", "#34a07e");
changeLinkColor("Apples", "#3194b1");

...或者您可以从数据源或对象中提取水果名称和所需颜色。然后遍历它们中的每一个以更改每一个...我现在看到的只是在单独的答案中进行了解释。干得好@manishie！

更灵活的选择！

向上述函数添加第三个参数以更改匹配的元素 - 链接、div、段落等...

http://jsfiddle.net/gexr574g/3/

function changeTextColor (element, word, hexColor){
        $(element+":contains("+word+")").css("color", hexColor);
}

//change all `a` tags containing "Kumquat"
changeTextColor("a", "Kumquat", "#dd33aa"); 

//changes the text color of any paragraph containing the word "fruit" 
changeTextColor("p", "fruit", "#33ffaa");

【讨论】：