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我正在玩的小提琴。

感谢。

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类。

Answer 2

你已经为自己设置了一个非常难以上班的课堂结构 - 这比你制作它要容易得多。给出你的每个问题＆＃34;链接课程＆＃39;问题＆＃39;和唯一的id＆＃34; question1＆＃34;，＆＃34; question2＆＃34;等等。答案节点相同：class＆＃34; answer＆＃34;和id＆＃34; answer1＆＃34;，＆＃34; answer2＆＃34;等

现在，您可以轻松访问$('.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的同时添加和删除类

2 个答案: