1
votes

comment afficher la bordure du div cliqué uniquement?

J'ai besoin d'aide pour résoudre ce problème jquery ou javascript. J'ai beaucoup de div avec des identifiants particuliers et en cliquant sur ce div, la bordure doit être modifiée et en cliquant sur un autre div avec un identifiant différent, la bordure de cette div est à nouveau modifiée comme la div précédente mais la bordure de la div précédente est supprimée.

javascript jquery

2 commentaires

Veuillez publier des exemples de code de vos efforts jusqu'à présent. Cela permettra aux gens de vous aider plus facilement. :)

Veuillez télécharger le code que vous avez écrit jusqu'à présent afin que nous puissions vous aider à le déboguer.

6 Réponses :

0
votes

Essayez ceci:

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

// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=>{
  $(".the_div_class").addClass("the_border_class");
});

1 commentaires

Salut. Cela ne répond pas à la question, que se passe-t-il si vous avez plusieurs .the_div_class et que vous cliquez sur un, puis sur un autre? Le premier devrait s'éteindre :)

0
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
</head>
<body>
<div class="mydiv">ABCD</div>

</body>
</html>

.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}

$(".mydiv").click(function(){

$(this).css('border','10px solid black');

});

2 commentaires

Salut. Cela ne répond pas à la question, que se passe-t-il si vous avez plusieurs .the_div_class et que vous cliquez sur un, puis sur un autre? Le premier devrait s'éteindre :)

De plus, vous avez maintenant deux réponses à la même question. Veuillez mettre à jour une fois (je suggère d'ajouter un exemple à l'autre article car il est plus à l'épreuve du temps) et supprimez l'autre.

0
votes

vous pouvez écrire en script java -

let yourDivIds =["your_div1","your_div2"];  // specify all your div ids

function removeGlowingDivs() { // this will remove class from other div's
    yourDivIds.forEach(item=>{
        document.getElementById(divID).removeClass('your_class_name');
    })
}

// add this on click event on all div's
function highlightDiv(divID) { // this will add class

    removeGlowingDivs();
    document.getElementById(divID).addClass('your_class_name');
}

1 commentaires

Il est préférable que SO vous expliquiez ce que vous avez fait. C'est javascript est évident, car c'est une question JS. Il serait plus utile de décrire ce que vous avez fait et pourquoi vous avez fait cela :)

1
votes

<style>
.mydiv {
  width:100px;
  height:100px;
  background-color:yellow;
  float:left;
  margin:10px;
}
.active{
  border: 10px solid black;
}
</style>

<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>

<script>
  $(".mydiv").click(function(){

    $(".mydiv").removeClass('active');
    $(this).addClass('active');

  });
</script>

1 commentaires

J'ai pris votre idée et enlevé les parties non pertinentes pour que l'accent soit davantage mis sur la partie solution :) Je l'ai également changé en classe au lieu de coder en dur un style, mais le principe demeure.

0
votes

    $('div').click(function(){
       $('div').css('border', 'none');
       $(this).css('border', '1px solid black');
    });
NOTE: Replace the $(div) with the relevant parent element's ID or class.

1 commentaires

1
votes

Regardez l'extrait ci-dessous pour voir ma tentative. Ce qu'il fait, c'est qu'une fois que vous cliquez sur un div avec la classe clickable , le code supprime la classe border du div précédent, ajoute la classe border au div nouvellement cliqué et met à jour le prevDiv .

Je préfère cette méthode parce que là où d'autres personnes utilisent $ ('div'). css ('border', 'none'); pour supprimer toutes les bordures de chaque div, ce code supprime uniquement la bordure du div précédemment cliqué. Vous permettant ainsi d'avoir des divs (non cliquables ) avec une classe de bordure / bordure prédéfinie.

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

<div class="clickable" id="firstID">Placeholder text</div>
<div class="clickable" id="secondID">Placeholder text</div>
<div class="clickable" id="thirdID">Placeholder text</div>

.clickable {
  width:100px;
  height:100px;
  margin: 10px;
  display: inline-block;
  margin-right: 25px;
}

.border {
  border: 5px solid black;
}

#firstID {
  background-color: red;
}

#secondID {
  background-color: orange;
}

#thirdID {
  background-color: lime;
}

let prevDiv;

$(".clickable").click(function(){
  $(prevDiv).removeClass('border');
  $(this).addClass('border');
  
  prevDiv = $(this);
});

0 commentaires