单击可显示和隐藏具有匹配类名称的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>

CodePen：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>