동적으로 변경 요소 CSS 텍스트 상자

Question

내 프로젝트에서 -

https://c9.io/mikethedj4/mmd/workspace/index.html 그래서 실험 WYSIWYG 웹 사이트 디자이너 작업, 오늘 몇 가지 문제로 실행하고 있습니다. 나는 다음과 알 수없는 요소 클래스를 잡는거야

...

$('.findclassname').val($(this).attr('class'));

나는

if ($(this).css('position') === 'static') { 
    $('.grab-pos-static').css('backgroundColor', '#1c1c1c'); 
    $('.grab-pos-absolute').css('backgroundColor', '#444'); 
    $('.grab-pos-fixed').css('backgroundColor', '#444'); 
} 

if ($(this).css('position') === 'absolute') { 
    $('.grab-pos-static').css('backgroundColor', '#444'); 
    $('.grab-pos-absolute').css('backgroundColor', '#1c1c1c'); 
    $('.grab-pos-fixed').css('backgroundColor', '#444'); 
} 

if ($(this).css('position') === 'fixed') { 
    $('.grab-pos-static').css('backgroundColor', '#444'); 
    $('.grab-pos-absolute').css('backgroundColor', '#444'); 
    $('.grab-pos-fixed').css('backgroundColor', '#1c1c1c'); 
} 

클래스 후

하고 ... 그것은 다음과 위치입니다 잡는거야 위치가 잡혔습니다. 다음 값으로 새 값으로 변경하려고합니다.

$('.grab-pos-static').click(function() { 
    $($('.findclassname').val()).css({ 
    'position': 'static' 
    }); 
    $('.grab-pos-static').css('backgroundColor', '#1c1c1c'); 
    $('.grab-pos-absolute').css('backgroundColor', '#444'); 
    $('.grab-pos-fixed').css('backgroundColor', '#444'); 
}); 

$('.grab-pos-absolute').click(function() { 
    $($('.findclassname').val()).css({ 
    'position': 'absolute' 
    }); 
    $('.grab-pos-static').css('backgroundColor', '#444'); 
    $('.grab-pos-absolute').css('backgroundColor', '#1c1c1c'); 
    $('.grab-pos-fixed').css('backgroundColor', '#444'); 
}); 

$('.grab-pos-fixed').click(function() { 
    $($('.findclassname').val()).css({ 
    'position': 'fixed' 
    }); 
    $('.grab-pos-static').css('backgroundColor', '#444'); 
    $('.grab-pos-absolute').css('backgroundColor', '#444'); 
    $('.grab-pos-fixed').css('backgroundColor', '#1c1c1c'); 
}); 

불행하게도 이것은 요소 위치 값을 동적으로 변경합니다.

다른 방법이 있습니까?

도움을 주시면 대단히 감사하겠습니다. 감사합니다

~ 마이클

Answer 1

이 제대로 위치를 잡아 아닙니다. 두 개의 인수를 사용하여 .css()을 호출하면 스타일을 설정하고 비교하지 않습니다. 다음과 같아야합니다.

if ($(this).css('position') == 'static') { 

코드에서 위치를 변경하려면 올바른 선택기를 사용하고 있지 않습니다. 그것은해야한다 : 요소는 단지 하나 개의 클래스가있는 경우 당신이하고있는 방식으로 만 작동합니다

가

$("." + $('.findclassname').val()).css({ 
    'position': 'absolute' 
}); 

참고. 요소에 클래스가 두 개 이상있는 경우 $(this).attr("class")은 모든 클래스를 공백으로 구분 된 문자열로 반환하므로 선택기에서 올바르게 작동하지 않습니다.