Question

所以我遇到的问题很简单。我有一个范围<span class=""spDetails>Show More</span>，我正在扩展一个部分以显示更多文字。

我遇到的问题是我想在页面的其他部分使用此功能。

这是我用来使toggleClass活动的jquery代码。

$(".spDetails").click(function() {
  $(".divFees").toggleClass("feesActive");
});

我的问题是：我不想为使用此切换的每个元素编写这行代码，是否有办法为具有不同类名或ID的多个元素创建此代码？感谢。

是的，所以这是我的HTML :(缩短版本！）

<div id="optionOne" class="elementOne">
     <div class="divFees">
         <p>Text Text</p>
     </div>
     <span class="showMore">Show More</span>
</div>

<div id="optionTwo" class="elementTwo">
     <div class="divFees">
         <p>Text Text</p>
     </div>
     <span class="showMore">Show More</span>
</div>

我只是在点击了孩子<div class="divFees"></div>时试图隐藏并显示<span>。

Answer 1

您可以使用,将所需元素添加到选择器中。

$(".divFees , .otherOnes , #otherOneWithId").toggleClass("feesActive");

Answer 2

如果切换部分位于切换span：

之后

$(".spDetails").on("click", function(e) {
  
  $(this).next().toggleClass("active");
  
});

[id*='div'] {
  height: 60px;
  background: #f2f2f2;
  border: #f6f6f6;
}

.active {
  background: #555555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

<span class="spDetails" data-toggle="#div1">Toggle 1</span>
<div id="div1"></div>

<span class="spDetails" data-toggle="#div2">Toggle 2</span>
<div id="div2"></div>


</section>

或者使用额外的属性来指定目标：

$(".spDetails").on("click", function(e) {
  
  var target = $($(this).data("toggle"));
  target.toggleClass("active");
  
});

[id*='div'] {
  height: 60px;
  background: #f2f2f2;
  border: #f6f6f6;
}

.active {
  background: #555555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

<span class="spDetails" data-toggle="#div1">Toggle 1</span>
<div id="div1"></div>

<span class="spDetails" data-toggle="#div2">Toggle 2</span>
<div id="div2"></div>


</section>

Answer 3

我想象两种方式：

简单方法：

使用args为您的活动制作功能。例如：

function setToogleClass(button, toggleElement, toggleClass) {
  $('.' + button).click(function() {
    $('.' + toggleElement).toggleClass(toggleClass);
  });
}
setToggleClass("spDetails", "divFees", "feesActive")

很难：

所有具有className且找到子元素或父元素或当前元素的类设置事件函数。

function initToggleEvents() {
  var toggleButtons = $('toggle-button');
  var activeClassName = 'toggle-active';
  toggleButtons.forEach(function(toggleButton) {
    toggleButton.click(function(event) {
      // if event.target has parentNode that toggleClass(activeClassName)
      // else another rules
    }
  }
}

如何在多个元素上使用toggleClass但不能同时使用

3 个答案: