Javascript 检测/操作一个元素'；s CSS

小提琴-

我正在做一个实验性的所见即所得网页设计师，遇到了一个问题。
最初我是单独做这件事的，但当我回头看代码时，我想我可以用一种更简单、更容易阅读的方式缩小它的范围，同时仍然执行它的任务

我有一个div

.setmy typography

，其中有一组锚定，标题和文本用于说明字体系列的名称

当我点击canves/编辑器时，我可以在文本框中获取一个div的类名，并开始动态地操作它，使用文本框作为类的持有者，以便轻松地操作

我可以检测字体，并使用

$（'.name'）.val（$（this.css（'font-family'））将其显示在文本框中，而不会出现问题

我的问题是在检测之后。如果我检测到arial、sans或impact等字体。我希望所有锚定上的背景颜色都改变，但正在使用的字体（如arial）除外。例如，我试图检测attr（‘title’）或text（），同时也改变背景颜色以显示它是活动字体且当前处于选中状态

这就是我停下来的地方

// Detect Font Family
if ($('.setmy-typography').find('a').text() === $(this).css('font-family')) {
  $('.setmy-typography a').css('backgroundColor', '#666');
  $(this).css('backgroundColor', '#1c1c1c');
}

这是锚定上的单击事件，通过锚定的.text（）更改所选元素的字体大小

我正在尝试创建这种效果，但是当您单击画布中的某个元素时检测到字体族时

对于结束语，我知道我可以单独完成（因为这是我在处理越来越深入之前开始做的事情）

这就是单独完成字体样式检测时的外观

// Detect Font Family
if ($(this).css('font-family') === 'serif') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-serif').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'sans') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-sans').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'arial') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-arial').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'arial black') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-arial-black').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'courier') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-courier').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'comic sans ms') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-comic-sans-ms').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'helvetica') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-helvetica').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'impact') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-impact').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'lucida sans') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-lucida-sans').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'tahoma') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-tahoma').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'times') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-times-new-roman').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'times new roman') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-times-new-roman').css('backgroundColor', '#1c1c1c');
}

if ($(this).css('font-family') === 'verdana') {
  $('.setmy-typography a').css('backgroundColor', '#444');
  $('.grab-verdana').css('backgroundColor', '#1c1c1c');
}

正如你所看到的，这是有点头痛和不必要的。我肯定有更简单的方法，但我似乎想不出来

非常感谢您的帮助
 我只是将所有字体系列和CSS属性放在一个数组/对象中，并在其上循环：

var fontFamilyCSS = {
    'serif': {
        '.setmy-typography a': {
            'backgroundColor': '#444'
        }, 
        '.grab-serif': {
            'backgroundColor': '#1c1c1c'
        }
    }, 
    'sans': {
        '.setmy-typography a': {
            'backgroundColor': '#444'
        }, 
        '.grab-sans': {
            'backgroundColor': '#1c1c1c'
        }
    }
    // And so on
};

然后：

var css = fontFamilyCSS[$(this).css('font-family')] || false;

if (css) {
    for (var selector in css) {
        $(selector).css(css[selector]);
    }
}

差不多吧。（未经测试）

编辑：事实上，由于字体系列之间的唯一区别在于您正在设置
。抓取字体系列名称
，您可能可以执行以下操作：

var fontFamily = $(this).css('font-family').toLowerCase().replace(/ /g, '-');

$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-' + fontFamily).css('backgruondColor', '#1c1c1c');

我甚至没有想到我与类名的区别。我只需要4行。谢谢-
var fontFamily = $(this).css('font-family').toLowerCase().replace(/ /g, '-');

$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-' + fontFamily).css('backgruondColor', '#1c1c1c');