jQuery .css() метод не работает

Question

У меня есть код, который использует метод jQuery .css() для изменения стиля DIV, но он не работает. Вот упрощенная версия моего кода, которая реплицирует проблему.

HTML:

<input type="radio" name="show" id="showleft" value="showleft">Left 
<input type="radio" name="show" id="showright" value="showright">Right 
<div id="cfwrapper">XXXXXXXXX</div> 

CSS:

#cfwrapper { 
    bottom: 10px; 
    left: 30px; 
    position: fixed; 
} 

JavaScript:

$("input:radio[name=show]").click(function(event){ 
    if (event.target.id == 'showleft') { 
     // remove property 'right:30px' 
     // add property 'left:30px' 
    } else if (event.target.id == 'showright') { 
     $('#cfwrapper').css('left',''); // remove property 'left:30px' 
     // add property 'right:30px' 
    } 
}); 

Что происходит в приведенном выше коде, что линия $('#cfwrapper').css('left',''); не работает. Я бы ожидал, что он удалит свойство «left» из «cfwrapper» («XXXXXXXXX» будет перемещать 30px влево), а затем я бы использовал аналогичный оператор - $('#cfwrapper').css('right','30px'); - чтобы добавить свойство «right», чтобы «XXXXXXXXX» затем будет идти справа от страницы, но это не сработает.

Может ли кто-нибудь сказать мне, почему он не работает? Разве это не должно было работать?

JSFiddle: http://jsfiddle.net/fidnut/hLqngbsb/

Answer 1

попробовать этот .css('left','auto')

$("input:radio[name=show]").click(function(event){ 
    if (event.target.id == 'showleft') { 
     document.getElementById('op').innerHTML='Left side'; 
     $('#cfwrapper').css({'left':'30px','right':'auto'}); 

    } else if (event.target.id == 'showright') { 
     document.getElementById('op').innerHTML='Right side'; 
     $('#cfwrapper').css({'left':'auto','right':'30px'}); 
    } 
}); 

http://jsfiddle.net/hLqngbsb/2/

Answer 2

Пожалуйста, смотрите ответ на this question.

От jQuery docs:

Установка значения свойства стиля в пустую строку - например, $('#mydiv').css('color', '') - удаляет это свойство из элемента, если оно уже было применено непосредственно, будь то в атрибуте стиля HTML, с помощью метода jQuery .css() или путем прямого манипулирования DOM свойства style. Однако он не удаляет стиль, примененный с помощью правила CSS в таблице стилей или <style>.

Более ремонтопригодны подход можно было бы добавить/удалить классы для управления стиль:

http://jsfiddle.net/0hh80mkd/2/

Answer 3

Используйте класс

.cfwrapper { 
    bottom: 10px; 
    left: 30px; 
    position: fixed; 
} 

.cfwrapperDis{ 
    bottom: 10px; 
    left: 30px; 
    position: fixed; 
} 

затем

$("input:radio[name=show]").click(function(event){ 
    if (event.target.id == 'showleft') { 
     // remove property 'right:30px' 
     // add property 'left:30px' 
    } else if (event.target.id == 'showright') { 
     $('#cfwrapper').removeClass("cfwrapper").addClass("cfwrapperDis"); // remove property 'left:30px' 
     // add property 'right:30px' 
    } 
});