时间戳

首页 > 解决方案 > 如何使用一个元素的子元素通过 jQuery 切换另一个元素上的类？

html - 如何使用一个元素的子元素通过 jQuery 切换另一个元素上的类？

问题描述

我正在尝试使用 jQuery 编辑 wordpress 插件。我在布局的一行（.first-row）中添加了一个按钮，并尝试使用它来切换下面一行（.second-row）上的类。

我不知道该怎么做——我试过用.closest它来选择第二行并切换类，但这似乎不起作用。我也尝试过使用.nextand .find，但没有任何成功。

我不记得我是怎么做到的，但我设法早点接近 - 问题是如果我点击任何一个按钮，它会切换两个 div 上的类与该类，而不是特定下面的类按钮单击。（这就是为什么我包括两个相同的布局。）

这是我的 JS Fiddle 示例。

https://jsfiddle.net/v71sytLf/5/

HTML

<div class="wrapper">
    <div class="upper-section"></div>
    <div class="lower-section">
        <div class="first-row"></div>
        <div class="second-row"></div>
    </div>
</div>

<div class="wrapper">
    <div class="upper-section"></div>
    <div class="lower-section">
        <div class="first-row"></div>
        <div class="second-row"></div>
    </div>
</div>

CSS

.wrapper {
  position:relative;
  top:0;
  float:left;
  display:inline-block;
  width:275px;
  background:pink;
  margin-right:24px;
}

.upper-section {
  height:200px;
}

.first-row {
  height:55px;
  background:purple;
}

.second-row {
  height:55px;
  background:yellow;
}

.second-row.open {
  background:blue;
}

.button {
  position:absolute;
  display:block;
  right:0;
  background:orange;
}

jQuery

jQuery(document).ready(function($) {    

  $(".first-row").append("<span class='button'>Button</span>");

  $(".button").click(function() {
    $(this).closest(".second-row").toggleClass("open");
  });

});

标签： htmljquerycss

解决方案

首先，您需要直接拥有按钮 DOM，以便更轻松地触发操作。出于可访问性的原因，更喜欢元素作为按钮，它可以做某事但不链接到任何东西。然后，使用 jQuery 的 parent 和 next 选择器相对触发。

<div class="wrapper">
<div class="upper-section"></div>
  <div class="lower-section">
    <div class="first-row">
      <button class="button">Button</button>
    </div>      
    <div class="second-row"></div>
  </div>
</div>

<div class="wrapper">
<div class="upper-section"></div>
  <div class="lower-section">
    <div class="first-row">
      <button class="button">Button</button>
    </div>
    <div class="second-row"></div>
  </div>
</div>

jQuery(document).ready(function($) {    

  $(".button").click(function() {
    $(this).parent().next(".second-row").toggleClass("open");
    });
  
});

这是更新的小提琴：https ://jsfiddle.net/0xq8w9sm/1/

推荐阅读