는/감지 요소의 CSS

Question

바이올린 조작 - http://jsbin.com/UsamELI/1/edit

내가 실험 WYSIWYG 웹 디자이너 일하고 있어요, 그리고 문제에 부딪쳤다.
처음에는이 작업을 개별적으로 수행했지만, 돌아가서 코드를 살펴 보았을 때 작업을 수행하면서 더 간단하고 쉬운 방법으로 작업 범위를 좁힐 수 있다고 생각했습니다.

나는 글꼴 패밀리 이름을 나타내는 제목과 텍스트와 함께 앵커 세트가있는 div .setmy-typography을 가지고 있습니다.

canves/editor를 클릭하면 텍스트 상자에서 div의 클래스 이름을 가져 와서 텍스트 상자를 사용하여 쉽게 조작 할 수있는 클래스의 소유자로 동적으로 조작 할 수 있습니다.

나는 글꼴을 감지하고 $('.name').val($(this).css('font-family'));

내 문제 검출 이후를 사용하여 문제없이 텍스트 상자에 표시 할 수 있습니다. arial, sans 또는 impact를 폰트로 인식하는 경우. 나는 모든 앵커에서 backgroundColor를 변경하지만, 예를 들어 attr ('title') 또는 text()를 감지하려고 시도하고있는 예를 들어 arial과 같은 글꼴을 사용하려는 경우 backgrounColor를 변경하여 활성 글꼴로 표시하고 있습니다. 현재 선택됨. 나는이 앵커의는 .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()); 
}); 

와 앵커의 클릭 이벤트가

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

을 중지했던 여기

입니다 이 효과는 캔버스에서 요소를 클릭 한 후 글꼴 패밀리가 발견되었을 때 발생합니다. 내가 개별적으로 할 수있어 폐쇄 (즉, 내가 더 처리하기 전에 일을 시작 무엇으로 추가)에 대한

는

이 글꼴 스타일의 검출이 개별적으로

// 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 속성을 넣어 것

Answer 1

: 다음

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