动态改变一个元素的CSS从文本框

Question

我的项目 - https://c9.io/mikethedj4/mmd/workspace/index.html

所以我工作的一个实验所见即所得的网页设计师，今天遇到了一些麻烦。

我抓住以下配置的未知元素类...

$('.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")将以空格分隔的字符串形式返回所有类，并且在选择器中无法正常工作。