2
votes

Afficher et masquer la division avec le nom de classe correspondant au clic

Je suis toujours en train de me familiariser avec jQuery et je me suis demandé si quelqu'un avait une suggestion pour cela?

En gros, sur un clic, je veux afficher le div avec la classe correspondante, donc si vous cliquez sur le btn avec la classe '.project1' alors il devrait montrer le contenu div avec la même classe de '.project1'.

Je suis juste coincé sur la façon dont il trouverait ceci donc toutes les suggestions seraient géniales :)

Merci d'avance.

Extrait:

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

.content {
  display: none;
}

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

CodePen: https://codepen.io/nickelse/pen / mYrOdz? editors = 1111

javascript jquery html

0 commentaires

4 Réponses :

2
votes

Vous devez trouver le numéro du projet sur lequel vous avez cliqué.

Vous pouvez le faire en filtrant les classes du bouton sur lequel vous avez cliqué et en extrayant le numéro:

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

Il ne vous reste plus qu'à basculer le contenu du projet ciblé:

.content {
  display: none;
}

Voici un exemple fonctionnel:

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

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

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

0 commentaires

1
votes

Le basculement basé sur la correspondance de classe est l'une des choses les plus difficiles à faire dans JQuery, mais pour obtenir ce dont vous avez besoin, vous pouvez faire ce qui suit:

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

/* 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();
});

0 commentaires

3
votes

Une option consiste à utiliser data () pour stocker de manière arbitraire données associées aux éléments correspondants ou renvoyer la valeur dans le magasin de données nommé pour le premier élément de l'ensemble des éléments correspondants.

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

.content {
  display: none;
}

$('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
});

0 commentaires

0
votes

Vous pouvez essayer d'utiliser l'expression régulière pour la classe commencée par "project", puis l'afficher ou la masquer

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

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

$('.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();
});

0 commentaires