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

Question

我仍然在掌握jQuery，并想知道是否有人对此提出建议？

基本上点击我想用匹配的类显示div，所以如果你点击类'.project1'的btn，那么它应该显示内容div与'.project1'相同的类。

我只是坚持它会如何找到这一点所以任何建议都会很棒:)

提前致谢。

片段：

 $('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

您可以尝试将regex用于以“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>