Question

我有一个类，我们称之为'toggle-something'，这是在CSS中定义的，我想将该类应用于每个被点击的项目。问题是如何缩短此代码，因此只有一个点击功能可以处理所有项目..？

$('.first').on('click', function() {
     $('.item-first').toggleClass('toggle-something');
});

$('.second').on('click', function() {
     $('.item-second').toggleClass('toggle-something');
});

<button class="first">
  <div class="item-first">
    lorem
  </div>
</button>

<button class="second">
  <div class="item-second">
    ipsum
  </div>
</button>

.toggle-something {color: red;}

Answer 1

您可以使用* generic selector ...

＆＃13;

$('*').on('click', function(e) {
  e.stopPropagation();
     $(this).toggleClass('toggle-something');
});

＆＃13;

.toggle-something{
background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
<span>a</span>
<p>a</p>

＆＃13;

Answer 2

您可以使用$(this)来引用所点击的项目，这意味着您可以执行以下操作：

$('.first, .second').on('click', function() {
     $(this).find("div").toggleClass('toggle-something');
});

Answer 3

如果你想选择哪些能够调用该函数的元素，我会这样做：

JS

$('.click').on('click', function() {
     $(this).toggleClass('toggle-something');
});

HTML 的

<button class="first">
  <div class="item-first click">
    lorem
  </div>
</button>

<button class="second">
  <div class="item-second click">
    ipsum
  </div>
</button>

基本上所做的就是将类click添加到应该能够启动切换功能的每个元素。

如果您希望所有内容都可以切换，请参阅@RenzoCC回答！

Answer 4

您可以这样做：

$('button').on('click', function() {
  $(this).find('div').toggleClass('toggle-something');
});

.toggle-something {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first">
  <div class="item-first">
    lorem
  </div>
</button>

<button class="second">
  <div class="item-second">
    ipsum
  </div>
</button>

为要单击的特定项切换相同的类

4 个答案: