Добавление и удаление класса одновременно с обновлением div

Я - очень новичок в JavaScript. Я пытаюсь обновить div, который отлично работает перед добавлением и удалением частей класса. Проблема в том, что когда я добавляю класс, я не могу заставить его удаляться, когда нажимается следующее изображение. Я использовал параметр remove class, но, похоже, он не работает.Добавление и удаление класса одновременно с обновлением div

Любая помощь приветствуется. Вот код:

$('[class^="question"]').on('click', function(e) { 
    e.preventDefault(); 
    var numb = this.className.replace('question', ''); 
    $('[id^="answer"]').hide(); 
    $('.question*').removeClass('question*selected'); 
    $('#answer' + numb).show(); 
    $('.question' + numb).addClass('question' + numb + 'selected'); 
});

Here is a link к Fiddle Я играю с.

Спасибо.

источник

2016-02-03 UltimateNoob

Вам необходимо условное, проверки, если класс был уже добавлено. И $ (это) указывает на элемент, нажатый. –

Пожалуйста, объясните, в чем проблема. Я посетил скрипку, и я не могу понять, что вы ожидаете, и что произойдет вместо этого. Кроме того, должны отсутствовать изображения или что-то в этом роде, поэтому divs невидимы. – JotaBe

Кажется, вы можете просто добавить звездочку в 'removeClass' как« match all », но это не так, как это работает, класс должен точно соответствовать. Почему бы вам даже добавить номера в класс в первую очередь? – adeneo

Вы можете отслеживать свой добавленный класс, указав глобальную переменную. Я создал рабочий пример в CODEPEN.

$(document).ready(function() { 
    var appliedClass = "container1"; 
    var classNo = 1; 

    $(".buttonCon").click(function() { 
     if ($(".container").hasClass(appliedClass)) { 
      $(".container").removeClass(appliedClass); 
      classNo++; 
      if (classNo > 4) {classNo = 1;} 
      appliedClass = "container" + classNo; 
      $(".container").addClass(appliedClass); 
     } 
    }); 
});

У меня есть appliedClass переменная, которая хранит отслеживания последнего добавленного класса. Каждый раз, когда вы нажимаете на кнопку с классом .buttonCon, эта переменная будет обновлена до нового добавленного класса. В следующий раз, сначала мы удалим прежний класс. Затем мы добавили новый. Второй оператор if может не понадобиться в вашем случае, но в моем примере мне понадобилось, чтобы он продолжал цикл container1 до container4 классов.

источник

2016-02-03 18:28:14

Отлично. Это дало мне ответ, который мне нужен. Мне просто нужно было создать дополнительные глобальные переменные. Благодарю. – UltimateNoob

Вы создали себя с очень сложной работой с классовой структурой - это может быть намного проще, чем вы это делаете. Дайте каждому из ваших «вопросов» ссылки «вопрос» класса и уникальный идентификатор «question1», «question2» и т. Д. То же самое для узлов ответа: class «answer» и id «answer1», «answer2» и т. Д.

Теперь вы можете легко получить доступ ко всем вопрос связи с $('.question') или все ответы с $('.answer'), и может использовать идентификаторы, чтобы идентифицировать отдельные узлы по мере необходимости:

$('.question').on('click', function(e) { 
    e.preventDefault(); 
    var numb = this.id.replace('question', ''); 
    var answerNode = $('#answer'+numb); 
    if (answerNode.hasClass('hide')) { 
    // the Q they clicked on is not yet visible 
    $('.answer').addClass('hide'); // hide all answers 
    answerNode.removeClass('hide'); // show the desired one 
    } else { 
    // the Q they clicked on is already visible, so toggle it back off 
    answerNode.addClass('hide'); 
    } 
});

http://jsfiddle.net/647dadtj/

источник

2016-02-03 19:19:02

Добавление и удаление класса одновременно с обновлением div

ответ

Смежные вопросы