4
votes

Comment changer le texte de
si
a un attr 'ouvert'

Si la balise details a un attribut open , le texte summary indiquera "Close".

Ma tentative de modification du texte:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="description" open>
  <summary class="">Show</summary>
  <p class="">Description text</p>
</details>

if (jQuery("details").click().attr("open")) {
  jQuery("summary").text("Close");
} else if (jQuery("details").click().attr("")) {
  jQuery("summary").text("Show")
}

jquery html

2 commentaires

Devez-vous utiliser l'attribut? pourquoi ne pas utiliser l'attribut de données avec vrai et faux? data-open = "true" et lisez sa valeur comme ceci: data ('open'); et écrivez comme ceci: data ('open', true); Si vous DEVEZ utiliser l'attribut ... alors regardez cette réponse: stackoverflow.com/questions/1318076/...

Pas besoin du tout de Javascript ici. Ceci peut être réalisé avec CSS et est éternellement plus rapide. Voir ma réponse ci-dessous.

3 Réponses :

3
votes

Utilisez hasAttribute () pour vérifier si l'attribut existe ou non.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="description" open>
  <summary class=""></summary>
  <p class="">Description text</p>
</details>

$("summary").html("Close");

$("details").click(function() {
  if ($(this)[0].hasAttribute("open")) {
    $("summary").html("Show");
  } else {
    $("summary").html("Close");
  }
});

4 commentaires

Je vous remercie. Par hasard si j'avais 5 ou 10 détails / résumés, est-ce que je pourrais n'affecter que celui qui a été cliqué?

Encore une fois, utilisez simplement CSS pour cela au lieu de jQuery ou Javascript. CSS n'a pas non plus ce problème.

OP a mis jquery comme balise alors je lui ai donné une réponse dans jQuery. @connexo

@Paolo C'est parfaitement bien! Je voulais juste souligner la solution supérieure pour ce cas d'utilisation spécial.

4
votes

Utilisez simplement CSS pour cela, ici combiné avec un effet de décoloration / croissance / réduction soigné:

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>

details.description[open] summary::after {
  content: attr(data-open);
}

details.description:not([open]) summary::after {
  content: attr(data-close);
}

Voici la version minimale:

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>

details.description summary::after {
  content: attr(data-open);
  opacity: 0;
  font-size: 5px;
}

details.description[open] summary::after {
  content: attr(data-open);
  opacity: 1;
  font-size: 14px;
}

details.description summary::before {
  content: attr(data-close);
  opacity: 0;
  font-size: 5px;
}

details.description:not([open]) summary::before {
  content: attr(data-close);
  opacity: 1;
  font-size: 14px;
}

details.description summary::after,
details.description summary::before {
  display: inline-block;
  transition: all .4s ease-in-out;
  transform-origin: center bottom;
}

4 commentaires

Parfait. Cela me permet de ne pas savoir comment cibler l'élément sur lequel l'utilisateur clique. Je ne savais pas à ce sujet. Merci.

Avec seulement CSS, vous pouvez même faire en sorte que le texte actuel disparaisse et que l'autre disparaisse. Voir la réponse mise à jour.

Des liens qui approfondiraient cette fonctionnalité?

Nan. Tout est dans ma tête, je suppose. Peut-être que quelqu'un d'autre peut trouver un lien?

-1
votes

Voici une solution minimaliste sans utiliser de CSS .
Ajoutez ou supprimez simplement l'attribut "open" en utilisant .attr () et . removeAttr () .

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

<div>
  <details>
    <summary>See details</summary>
    <p>My details</p>
  </details>
</div>

$("summary").click(function() {
  if($("details")[0].hasAttribute("open")) {
    $("summary").html("See details");
    $("details")[0].removeAttr("open");
  } else {
    $("summary").html("Hide details");
    $("details")[0].attr("open");
  }
});

0 commentaires

Comment changer le texte de si a un attr 'ouvert'

Comment changer le texte de
si
a un attr 'ouvert'