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

从文本框动态更改元素CSS

1 个答案: