Почему не удаляет класс jquery?

Question

[Владимир Тютимов]

Всем привет! Почему не срабатывает метод removeClass и addClass? Что я делаю не так?
Не срабатывает по клику на элемент с id = back_a
Вот код: jsbin.com/tutiju/1/edit?html,js

Answer 1

[tennalian]

$(document).ready(function(){
$('#back_a').click(
function(){
console.log($('#one'));
$("#one").removeClass('col-md-12').addClass('col-md-4');
});
});

Comments

[tennalian]

у вас ошибок в консоли не вылезает, не?

[Владимир Тютимов]

tennalian: нет, ошибок нет

[Владимир Тютимов]

tennalian: по клику на элемент с id="back_a" выполняется строчка console.log($('#one')); а следующая за ней нет

[1001001 111]

BidiBom ну не знаю, все нормально работает jsfiddle.net/nLng6mfp/, покажите весь код

[Владимир Тютимов]

Имя Фамилия: код jquery весь выложил. Html надо?

[Владимир Тютимов]

Имя Фамилия: добавил html код

[tennalian]

Владимир: у вас замещаются функции, при клипе на one вешается класс col-md-12, при клике на back_a col-md-4, но при этом back_a находится в one

[1001001 111]

Владимир:

jsfiddle.net/1ybnn3km

<div id="one_two" class="col-md-12">
            Второй этап
            <span id="back_a" >Назад</span>
          </div>

у Вас при клике на back_a вначале выполняется под

$('#back_a').click(
    function(){
      console.log($('#one'));
      $("#one").removeClass('col-md-12').addClass('col-md-4');
    }
);

а потом

$('#one').click(
  function(){
    $("#one").removeClass("col-md-4");
    $("#one").addClass("col-md-12");
    $("#two").addClass("hiden");
    $("#three").addClass("hiden");
    step = "2";
  }
);
</Code>

[Владимир Тютимов]

Врубился. А как правильно переделать? Суть в том что должно быть на странице 3 колонки, по клику на одной из них две пропадают, а оставшаяся раздвигается на всю ширину. Ну с этим я справился. Но теперь по клику по внутренним элементам будет срабатывать код и для общего div'а, можно это как-то обойти? Или как переписать чтобы было правильно. Я только учусь, поэтому любые дельные советы к месту будут.

[1001001 111]

Добавьте e.stopPropagation(); в событие нажатия на #back_a

$('#back_a').click(
    function(e){
      console.log(2);
      $("#one").removeClass('col-md-12').addClass('col-md-4');
        e.stopPropagation();
    }
);

[1001001 111]

Почитать про данную ф-ию можно тут https://developer.mozilla.org/en-US/docs/Web/API/e...

[Владимир Тютимов]

Имя Фамилия: Большое Вам спасибо!

Answer 2

[Сергей Мельников]

да потому, что вы не знаете js, и допускаете серьезные ошибки, при клике на #back_a, срабатывает клик и по элементу #one,
по факту мы имеем, при клике на элемент сначала удаляются а потом опять добавляются классы

можно вылечить так

$(function() {
  $('#back_a').on("click", function(e){
    e.stopPropagation();
    console.log($('#one'));
    $("#one").removeClass('col-md-12').addClass('col-md-4');
  });
});

но это костыль, надо реализовывать иначе

и вообще, чего вы сюда свою простыню кода лепите, есть для этого специальные ресурсы!!!
jsbin.com/tutiju/1/edit?html,js,output

Comments

[Владимир Тютимов]

А как по другому?

[Сергей Мельников]

Владимир: открываться должно при нажатии на заголовок (например)

[Владимир Тютимов]

Сергей Мельников: У меня задача такая: Страница состоит из трех столбцов, каждый столбец это картинка будет. И по нажатию на какой либо столбец, два столбца пропадают, а выбранный разъезжается на весь экран. И в нем появляются формы ввода (некий калькулятор цен). И есть кнопка назад, при щелчке на которую столбец съезжается обратно и появляются еще два, которые до этого пропали (т.е. все возвращается на свои места). До этого момента с JQuery не работал, и как делать такие вещи не знаю. Если есть отличные руководства по JQuery дайте ссылочки на них, я их с удовольствием изучу. Так же уже понял, что хоть JQuery и дает возможность просто делать сложные вещи JS тоже нужно знать. Сам сейчас пользуюсь справочником jquery.page2page.ru Если есть более лучшие ресурсы подскажите мне их, пожалуйста.

[Сергей Мельников]

при такой задачи, как у вас, и принимая во внимание ваши знания, решение с stopPropagation() будет самым лучшим, а вообще, для понимания, как работает js рекомендую почитать vk.com/doc29055700_352852441

[Владимир Тютимов]

Сергей Мельников: Спасибо большое)

Answer 3

[Владимир Тютимов]

Всем спасибо! Вопрос решен. Боюсь предположить, что в ближайшее время придется много работать с JS и JQuery, посоветуйте источники информации:

1. Почитать перед изучением JS/JQuery
2. Руководства по JS/JQuery
3. На что обратить внимание при изучении JS/JQuery

Сейчас пользуюсь справочником: jquery.page2page.ru
И читаю книгу: Берб Бибо, Иегуда Кац - jQuery. Подробное руководство по продвинутому JavaScript (High Tech)