单击其他元素时将类应用于元素

Question

我想写一个函数，但是我遇到了一个小问题。

我有一个盒子，当你点击另一个盒子时应该展开，但是有多个盒子，我只想要选择其中一个盒子。我的逻辑告诉我选择$(".class", this)来只选择一个框，但它不起作用，我找不到另一个解决方案。

我真的很感谢你的帮助。为了让你清楚地了解我想做什么，我只做了一个小线框，你可以在其中看到3个步骤：

1. 点击
选择框
2. 将样式应用于其他Box以展开它，
3. 以同样的方式，我选择了第二个框，我想从第一个框中选择另一个带有类的元素并将样式应用到它（它是一个箭头，指向方向指向顶部的箭头指向底部，这意味着它已扩大）。

以下是显示我想要做的代码示例：

https://codepen.io/Lueh/pen/eVgNoa

希望你明白我想做什么。我认为这是一个非常简单的答案，我只是没有想到它。顺便说一句，我使用jQuery来实现这一切。



//编辑：我找到了一个解决方案，我在选择了我的类之后使用了.next（）jQuery选择器。看看上面的笔，我把解决方案包括在那里。

Answer 1

您也可以使用ID而不是类

$("#button").click(function(){
  $("#container").addClass("your-class")
})

删除课程使用$("#container").removeClass("your-class")

或者你可以使用兄弟姐妹。这是一个例子：

<强> HTML

  <div class="container1">
    <button class="button">Button</button>
    <div class="box">
      Content1
    </div>
  </div>

  <div class="container2">
    <button class="button">Button</button>
    <div class="box">
      Content2
    </div>
  </div>

<强> JS

$(".button").click(function(e){
    $(this).siblings(".box").addClass("hidden")
})

和JS Fiddle demo

Answer 2

• 在课程（您的方框）上使用on click event
单击事件处理程序中的
• （通过类选择所有elem，.each并忽略单击的一个）
• .addClass("...")和或。removeClass("...")或toggleClass

祝你好运。