当我单击其他元素时将类应用于元素[关闭]

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（你的盒子）
• 在单击事件处理程序中（通过类选择所有元素，.each 并忽略单击的一个）
• .addClass("...") 和或 .removeClass("...") 或 toggleClass

祝你好运。