单击时显示和隐藏具有匹配类名称的 Div

Question

我仍在学习 jQuery，想知道是否有人对此有建议？

基本上在单击时我想显示具有匹配类的 div，因此如果单击具有类“.project1”的 btn，那么它应该显示具有相同类的“.project1”的内容 div。

我只是想知道它是如何找到这个的，所以任何建议都会很棒:)

提前致谢。

片段：

$('div[class*="project"]').click(function (e) {
	$(this).closest('.content').show();
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

代码笔：https://codepen.io/nickelse/pen/mYrOdz?editors=1111

Answer 1

一种选择是使用data() 存储与匹配元素关联的任意数据，或者在命名数据存储中为匹配元素集中的第一个元素返回值。

$('div[class*="project"]').click(function (e) {
    var project = $(this).data("project");        //Get the data-project of the clicked element
    $(".content.project" + project).toggle();     //Toggle the element with content and project class
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn" data-project="1">BTN 1</div>   <!-- Add data-project on HTML-->
<div class="project2 btn" data-project="2">BTN 2</div>
<div class="project3 btn" data-project="3">BTN 3</div>
<div class="project4 btn" data-project="4">BTN 4</div>


<div class="project1 content" data-project="1">CONTENT 1</div>
<div class="project2 content" data-project="2">CONTENT 2</div>
<div class="project3 content" data-project="3">CONTENT 3</div>
<div class="project4 content" data-project="4">CONTENT 4</div>

Answer 2

你需要找到你点击的项目号。

您可以通过过滤您单击的按钮的类别并提取数字来做到这一点：

+[...this.classList].find(c => c.startsWith('project')).replace('project', '');

那么你所要做的就是切换目标项目内容：

$('.content.project'+project).toggle();

---

这是一个工作示例：

$('div[class^="project"]').on('click', function(){
  const project = +[...this.classList].find(c => c.startsWith('project')).replace('project', '');
  
  $('.content.project'+project).toggle();
});

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Answer 3

基于类匹配的切换是 JQuery 中较难完成的事情之一，但是要实现您的要求，您可以执行以下操作：

/* When a btn is clicked */
$('.btn').click(function(e) {

  /* Extract the classes of this button element */
  const classes = $(this).attr('class');

  /* Parse the project class part of the classes string */
  const projectClass = classes.match(/project\d+/)[0];

  /* Construct a matcher for the projects corresponding
  content and "toggle" the content's visiblity */
  $('.content.' + projectClass).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>


<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Answer 4

您可以尝试对以“project”开头的类使用正则表达式，然后显示或隐藏它

$('.btn').click(function (e) {
    var classArray = $(this).attr("class"),
    re = /^project[0-9]+/ ,
    className = re.exec(classArray)[0];
    $('.content.'+ className).toggle();
});

$('.btn').click(function (e) {
    var classArray = $(this).attr("class"),
    re = /^project[0-9]+/ ,
    className = re.exec(classArray)[0];
    $('.content.'+ className).toggle();
});

.content {
    display: none
}
.btn {
    cursor:pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>

<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>