在更新 div 的同时添加和删除 class

Question

我对 JavaScript 很陌生。我正在尝试更新 div，它在添加和删除 class 块之前工作正常。问题是当我添加 class 时，我似乎无法在单击下一张图像时将其删除。我使用了删除 class 选项，但它似乎不想工作。

感谢任何帮助。这是代码：

$('[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

您可以通过定义一个全局变量来跟踪您添加的 class。我在 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 变量，用于跟踪最新添加的 class。每次点击带有 .buttonCon class 的按钮时，此变量将更新为新添加的 class。下次，我们先把前面的 class 去掉。然后我们添加了新的。在您的情况下可能不需要第二个 if 语句，但在我的示例中，我需要它来不断循环 container1 到 container4 classes.

Answer 2

您已经为自己设置了一个非常难以使用的 class 结构——这可能比您正在做的要容易得多。为每个 "question" 链接提供 class 'question' 和唯一 ID "question1"、"question2" 等。答案节点相同：class "answer" 和 id "answer1"、"answer2" 等

现在您可以使用 $('.question') 轻松访问所有问题链接或使用 $('.answer') 访问所有答案，并且可以根据需要使用 ID 来识别各个节点：

$('.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/

在更新 div 的同时添加和删除 class

Adding and removing a class at the same time as updating a div

javascript

jquery

html

addclass

removeclass