javascript - 在更新 div 的同时添加和删除类

Question

我对 JavaScript 很陌生。我正在尝试更新一个 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 。

谢谢。

Answer 1

您可以通过定义全局变量来跟踪添加的类。我在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 类。