如何在jquery / javascript中单击时更改文本的颜色？

Question

我有一个fiddle，我通过查看下面的屏幕截图进行了复制。

小提琴的工作方式是点击2个方框，底部会出现另一个方框。

我用过的JQuery代码：

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'green'); 
    $('#franchisehub p').css('color', 'white');  // Added line
    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

问题陈述：

我想要完成的是，点击上面屏幕截图中显示的绿色图片，文本颜色（特许经营中心或基于云端的＆移动）在2个方格框内转白。

我使用了以下代码来实现这一目标，但它似乎不起作用。

$('#franchisehub p').css('color', 'white'); //添加了行

Answer 1

嘿请检查我的codepen中的代码，所以基本上如果你将两种文本颜色都改为白色，那么它在选定的（绿色图像）中工作正常，但在另一个框中，背景为白色，因此文本消失。所以我只将p文本更改为所选（绿色图像）框的白色。我已经编辑了以下两个单击功能

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'green'); 
    $('#franchisehub p').css('color', 'blue !important'); 
  $('#franchisehub').find('p').css({color: '#fff'});
  $('#cloudbasedmobile').find('p').css({color: '#222'});
    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

$("#cloudbasedmobile").click(function() {

  if ($('.cloudbasedtextipad').css('display') == "flex") {
    $('.cloudbasedtextipad').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'white'); 
    $('#cloudbasedmobile').css('background-color', 'green');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    

$('#franchisehub').find('p').css({color: '#222'});

$('#cloudbasedmobile').find('p').css({color: '#fff'});

    $('.cloudbasedtextipad').css('display', 'flex');
    $('.franchisehubtv').css('display', 'none'); 
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');

  }
});