使用jQuery开关大小写更改文本颜色

下面的脚本实现了我更改锚标记中包含的单词的颜色的目标，但是我想让我的脚本更加优雅。如何在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（selector）不同）循环遍历每种颜色。每个。这将循环遍历对象或数组（本例中为对象），并运行关联的函数。每次运行函数时，它都会将当前键和值传递给函数。因此，第一次迭代，键='草莓'和值='34a07e'

对于每种颜色，将所有匹配元素的css更改为所需颜色

jQuery（函数（$）{
变量颜色={
“草莓”：“34a07e”，
“苹果”：“3194b1”，
“桃子”：“e1a82a”，
“香蕉”：“ff0b00”
};
$。每个（颜色、功能（键、值）{
$（“：包含（“+key+”）.css（'color'，value）；
});
})；

您可以尝试：

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

但这显然不是一个很大的改进…仍然太重复和限制

我认为交换机案例可能不是最好的方法，因为它不是非常灵活或可伸缩的。 每次添加新的水果时，您都需要添加一个新的案例！此外，如果您要执行所有这些来更改每个链接，那么实际上没有“条件”首先需要

if/else

或

开关

接受两个参数的函数：

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

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

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

…或者您可以从数据源或对象中提取水果名称和所需颜色。
然后循环通过每一个来改变每一个…我现在看到的只是在一个单独的答案中解释的。干得好@manishie

更灵活的选择！

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


你好，Manishie，谢谢你回复我的帖子。我注意到你将变量k，v传递给$。每个函数这些变量代表什么？我应该问的是它是如何工作的？换句话说，jQuery如何知道将键与特定单词（例如“Apples”）相关联，将值与特定颜色“#3194b1”相关联再次感谢，它工作得很好。
changeLinkColor("Strawberries", "#34a07e");
changeLinkColor("Apples", "#3194b1");

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