jquert实现多个同名class元素点击时判断元素的display属性，显示则隐藏 隐藏则显示

您可以使用 jQuery 的 toggle() 方法。首先，选择您需要点击的元素，使用同名 class 选择器。然后，编写一个点击事件处理程序，使用 jQuery 的 attr() 和 css() 方法来切换元素的 display 属性。

示例代码：

HTML：

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

CSS：

.box {
  display: none;
}

JavaScript：

$('.box').click(function() {
  if ($(this).css('display') == 'none') {
    $(this).css('display', 'block');
  } else {
    $(this).css('display', 'none');
  }
});

这段代码将为所有具有“box”类的元素添加一个点击事件处理程序。当您单击其中一个元素时，它将切换其 display 属性：如果它当前隐藏，则它将显示，反之亦然。

相关问题

jquert实现多个同名class元素点击隐藏、显示事件， 互不影响

您可以使用jQuery的each()方法来遍历所有同名class元素，并使用toggle()方法来切换它们的显示状态。例如，以下代码可以实现您的要求：

$('.className').each(function() {
  $(this).click(function() {
    $(this).toggle();
  });
});

其中，".className"是您想要控制的同名class元素的名称。这段代码会将点击事件绑定到所有的同名class元素上，并在点击时切换它们的显示状态。由于每个元素都是独立控制的，所以它们之间不会互相影响。

jquert实现多个同名class元素单独点击时，隐藏、显示事件 互不影响

可以通过给每个同名class元素添加唯一的ID来区分它们，然后在点击事件中通过ID选择器来控制每个元素的隐藏、显示事件，保证互不影响。例如：

HTML代码：

<div class="btn-group">
  <button class="btn" id="btn1">按钮1</button>
  <button class="btn" id="btn2">按钮2</button>
  <button class="btn" id="btn3">按钮3</button>
</div>
<div class="content-group">
  <div class="content" id="content1">内容1</div>
  <div class="content" id="content2">内容2</div>
  <div class="content" id="content3">内容3</div>
</div>

jQuery代码：

$('.btn').click(function() {
  var targetId = '#' + $(this).attr('id').replace(/btn/, 'content');
  $(targetId).toggle();
});

在上述代码中，我们通过正则表达式把按钮ID中的"btn"替换为"content"，生成对应内容的ID，并利用toggle()方法来实现单个元素的隐藏、显示。这种方法可以保证同名class元素的单独显示、隐藏事件互不影响。