Как подкорректировать скрипт?

Question

[Andrej Sharapov]

Всем привет.
Скрипт добавляет в div стили, прописанные в data-stl, т.е. в div style='...' , но при повторном нажатии стили не удаляются.

<input type="checkbox" class="btn_cls btn_newStyle" name="left" data-cls="utilFive" data-stl="{&quot;padding&quot;: &quot;30px 7px 60px&quot;}">

$(function() {
        var b = $('.btn_newStyle');
        b.click(function() {
          var stl = $(this).data('stl');
          $('#bSm').css(stl);
          $('#bSm').remove.css(stl);
        });
      });

Подскажите, как должен выглядеть скрипт и что я делаю не так?

Comments

[Stalker_RED]

Ошибки в консоли есть?

[Andrej Sharapov]

Stalker_RED, есть. "Uncaught TypeError: $(...).remove.css is not a function". Но я не знаю чем его заменить. пробовал через toggle(), но тоже не помогло.

[Stalker_RED]

Andrej Sharapov, а вот эту строчку ".remove.css" вы наугад написали или как?

[Andrej Sharapov]

Stalker_RED, там должен был быть просто ремув) прилипла в ходе экспериментов. Ни toggle(), ни removeAttr() не срабатывают

[Stalker_RED]

Andrej Sharapov, а что этот remove или toggle должен вообще убрать или переключить?

[Andrej Sharapov]

Stalker_RED, эта кнопка добавляет некоторые атрибуты, например padding: 20px; другая такая же, задает width/height и вот надо чтобы при повторном клике добавленные стили убирались. Но не все, а только те, которые добавляет та или иная кнопка.

[Stalker_RED]

Andrej Sharapov, а не проще css классы перключать?
jsfiddle.net/sbLo87yn

[Andrej Sharapov]

Stalker_RED, не все так просто)
Существует контейнер #bSm, в который скриптом-1 добавляются классы для демонстрации.
Также, есть несколько инпутов, которые другим скриптом-2 добавляют/убирают тот или иной класс, каждый из которых задает свои параметры контейнеру #bSm. Но задача еще в том, чтобы атрибуты и значения добавленного класса выводились в data-stl. Затем из data-stl скрипт-3 выводит содержимое data в другой контейнер result. Как это все упросить пока не знаю) Вот пытаюсь решить.

[Stalker_RED]

Andrej Sharapov, звучит непонятно.
такое?
jsfiddle.net/6598ywxL

Answer 1

[Владимир Проскурин]

У вас странный код. т.е. вы в одном обработчике пытаетесь сначала добавить стиль, а потом сразу удалить. И удаляете несуществующим методом remove.css.

Вот так верно
jsfiddle.net/Lxuqn6g0/1

$('.btn_newStyle').click(function() {
   var curStl = $(this).attr('style');
   if(!curStl) {
      var stl = $(this).data('stl');
      $(this).css(stl);
  } else {
     $(this).removeAttr('style');
  }
});

Comments

[Andrej Sharapov]

removeAttr я тоже пробовал. не срабатывает, хотя в консоли ошибок нет.

[Andrej Sharapov]

а может быть, что дело в скрипте, который добавляет класс через data-cls="utilFive" ?

[Andrej Sharapov]

Все получилось. спасибо.

[Andrej Sharapov]

а подскажите, можно ли сделать так, чтобы из style= удалялись только те атрибуты, которые добавляет этот инпут? если таких кнопок две, с разными параметрами, то скрипт удаляет все полностью...

[Владимир Проскурин]

Andrej Sharapov, jsfiddle.net/4uLjdv9f

[Andrej Sharapov]

Владимир Проскурин, спасибо.

[Andrej Sharapov]

Владимир Проскурин, прошу прощение за беспокойство. Подскажите, а если сделать вторую кнопку, которая добавляет тот же атрибут, но с другим значением, а потом нажать и отжать эту кнопку. Можно сделать, чтобы значения не стирались, а возвращались к предыдущим?

[Владимир Проскурин]

Andrej Sharapov, попробуйте сделать по той же логике. Например можно хранить последнюю копию стилей в data('lastStyled'), и от туда подгружать свойства при удалении.