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

我对JavaScript非常陌生。我正在尝试更新一个div，它在添加add和remove类片段之前运行良好。问题是，当我添加类时，我似乎无法在单击下一个图像时将其删除。我使用了remove类选项，但它似乎不起作用

感谢您的帮助。代码如下：

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

我正在玩小提琴

---

谢谢。

您可以通过定义全局变量来跟踪添加的类。我在中创建了一个工作示例

---

我有

appliedClass

变量，用于跟踪最新添加的类。每次使用

.buttonCon

类单击按钮时，此变量将更新为新添加的类。下一次，首先我们移除前一个类。然后我们添加了一个新的。第二个

if

语句在您的案例中可能不需要，但在我的示例中，我需要它来保持通过

container1

到

container4

类的循环。

您可以通过定义一个全局变量来跟踪添加的类。我在中创建了一个工作示例

---

我有

appliedClass

变量，用于跟踪最新添加的类。每次使用

.buttonCon

类单击按钮时，此变量将更新为新添加的类。下一次，首先我们移除前一个类。然后我们添加了一个新的。第二个

if

语句在您的案例中可能不需要，但在我的示例中，我需要它来保持通过

container1

到

container4

类的循环。

您已经为自己设置了一个非常难以使用的类结构——这可能比您所做的要简单得多。给每个“问题”链接类“问题”和唯一id“问题1”、“问题2”等。答案节点相同：类“答案”和id“答案1”、“答案2”等

现在，您可以使用

$（'.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');
   }
});

---

您已经为自己设置了一个非常难以使用的类结构——这可能比您所做的要容易得多。给每个“问题”链接类“问题”和唯一id“问题1”、“问题2”等。答案节点相同：类“答案”和id“答案1”、“答案2”等

现在，您可以使用

$（'.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');
   }
});

---

您需要一个条件，检查类是否已添加。$（这）指向单击的元素。请以更好的方式解释问题所在。我访问了小提琴，我无法理解您期望发生什么，以及会发生什么。此外，肯定会丢失图像或类似的东西，因此div是不可见的。您似乎认为您可以在

removeClass

中添加星号作为“全部匹配”，但这不是它的工作方式，类必须完全匹配。首先，为什么还要向类中添加数字$（this）可能对单击的类有效，但我需要从先前单击的类中删除该类。我希望在单击链接时将特定类添加到div中，然后在单击下一个链接时删除相同的类。每个div都有一个不同的类，所以我希望使用*而不必为每个div键入代码。$（这）指向单击的元素。请以更好的方式解释问题所在。我访问了小提琴，我无法理解您期望发生什么，以及会发生什么。此外，肯定会丢失图像或类似的东西，因此div是不可见的。您似乎认为您可以在

removeClass

中添加星号作为“全部匹配”，但这不是它的工作方式，类必须完全匹配。首先，为什么还要向类中添加数字$（this）可能对单击的类有效，但我需要从先前单击的类中删除该类。我希望在单击链接时将特定类添加到div中，然后在单击下一个链接时删除相同的类。每个div都有一个不同的类，所以我希望使用*而不是为每个div键入代码。这给了我需要的答案。我只需要创建一些额外的全局变量。谢谢，太好了。这给了我需要的答案。我只需要创建一些额外的全局变量。谢谢