如何用jQuery找到被点击元素的类别

当用户在网页上点击一个元素时，我们可以使用jQuery来找到被点击元素的类别并进行相应的操作。

以下是用jQuery找到被点击元素类别的完整攻略：

步骤1：创建HTML结构

首先，在HTML代码中创建元素，并向其中添加类别属性。例如：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

步骤2：使用jQuery绑定点击事件

使用jQuery选择所有的.box元素，然后使用click()方法为每一个元素绑定点击事件。例如：

$('.box').click(function() {
  // 代码块
});

步骤3：使用this关键字获取当前元素

在点击事件的代码块中，使用$(this)来获取当前被点击的元素。例如：

$('.box').click(function() {
  var boxClass = $(this).attr('class');
  console.log(boxClass);
});

以上代码会在控制台打印出当前被点击元素的class属性。

示例1：根据被点击元素的类别添加样式

以下代码会在用户点击一个元素时，根据元素的类别添加不同的样式。

$('.box').click(function() {
  var boxClass = $(this).attr('class');
  if (boxClass === 'box box-1') {
    $(this).toggleClass('box-1-clicked');
  } else if (boxClass === 'box box-2') {
    $(this).toggleClass('box-2-clicked');
  } else if (boxClass === 'box box-3') {
    $(this).toggleClass('box-3-clicked');
  }
});

示例2：根据被点击元素的类别执行不同的函数

以下代码会在用户点击一个元素时，根据元素的类别执行不同的函数。

$('.box').click(function() {
  var boxClass = $(this).attr('class');
  if (boxClass === 'box box-1') {
    functionForBox1();
  } else if (boxClass === 'box box-2') {
    functionForBox2();
  } else if (boxClass === 'box box-3') {
    functionForBox3();
  }
});

以上是使用jQuery找到被点击元素的类别的完整攻略，可以根据实际需求进行相应的更改和扩展。