Question

我正在研究一个实验性的WYSIWYG网页设计师，并遇到了一个问题最初我是单独做过这个，但是当我回过头来查看代码时，我认为我可以用更简单，更简单的方式将其缩小，同时仍然执行它的任务。

我有一个div .setmy-typography，其中有一组锚点，标题和文字用于说明font-family的名称。

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

我可以使用$('.name').val($(this).css('font-family'));

检测字体并将其显示在文本框中而不会出现问题

我的问题是在检测之后。如果我检测到arial，sans或impact，例如字体。我想在所有锚点上更改backgroundColor，但是像arial一样使用的字体，例如我正在尝试检测attr（'title'）或text（），同时还要更改它的backgrounColor以显示它是活动字体并且是目前已被选中。

这是我停止的地方

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

这是锚点上的点击事件，通过锚点.text（）

更改所选元素的字体大小

// Set selected elements font family
$('.grabmy-typography a').click(function() {
  $("." + $('.findclassname').val()).css({
    'font-family': $(this).text()
  });
  $('.grabmy-typography a').css('backgroundColor', '#444');
  $(this).css('backgroundColor', '#1c1c1c');
  $('.grab-font-family').val($(this).text());
});

我正在尝试创建这种类型的效果，但是当您单击画布中的元素时检测到font-family。

关闭我知道我可以单独做（因为这是我在进一步处理之前开始做的事情）

这是单独完成时字体样式检测的样子

// 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');
}

正如你所看到的那样，如果头疼并且不必要的话。我确信这是一种更简单的方法，但我似乎无法弄明白。

非常感谢任何帮助。

Answer 1

我只是将所有font-families和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]);
    }
}

这样的事情。（未测试）

编辑：实际上，由于字体系列之间的唯一区别在于您正在设置.grab-FONT-FAMILY-NAME，您可能会执行以下操作：

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

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

检测/操作元素的CSS

1 个答案: