Onclick div ne fonctionne que pour un seul utilisateur

Question

J'utilise ce code sur mon forum postbit. J'essaie d'avoir un div élément de révéler du texte pour chaque utilisateur, mais je ne peux le faire fonctionner pour le premier utilisateur.

Les autres divs sont toujours ouverts. Je ne suis pas sûr d'où je vais me tromper.

function toggleDiv(id) { 
 
    $("#" + myContent).toggle(); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="javascript:toggleDiv('myContent');"> 
 
    <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i> 
 
</a> 
 
<div class="animated fadeIn" id="myContent" style="padding: 10px;"> 
 
    Reveal text here. 
 
</div>

Answer 1

Votre fonction prend un paramètre id, mais que vous utilisez myCONTENT i le corps de la fonction. Comme cela, il fonctionne:

function toggleDiv(id) { 
 
    $("#"+id).toggle(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="javascript:toggleDiv('myContent');"><i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw">icon here</i></a> 
 

 

 

 
<div class="animated fadeIn" id="myContent" style="padding: 10px;"> 
 
reveal text here 
 
</div>

Answer 2

Quelques changements ici:

1. Ajouter la source jQuery. Ajoutez cette balise de script au-dessus de votre balise de script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   Remarque: Il apparaît que M. Polywhirl l'a ajouté à votre exemple.
2. utiliser le paramètre identifiant en fonction toggleDiv() $("#"+id).toggle(); dire, à moins que myCONTENT est défini ailleurs, il sera indéfini si $("#" + myContent).toggle(); provoquera une erreur. Pour ajouter le contenu initialement masqué, ajoutez le style display: none.
3. Supprimez le fadeIn nom de classe initialement et ajoutez-le après avoir basculé l'élément en utilisant .toggleClass().

Voir l'exemple mis à jour ci-dessous.

En ce qui concerne l'affichage du message pour le premier utilisateur , nous devons connaître la logique métier de ce concept. Pouvez-vous dire ce que le pid (ou uid, donné this list of fields in their API for posts) valeur est du premier utilisateur, peut-être sur la base d'une liste de publications dans MyBB? Vous mentionnez que ce code est en haut de la page: <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>. Donc, si vous connaissiez une certaine valeur pid pid (par exemple 1337), vous pouvez ajouter le code de façon conditionnelle pour ajouter le message au DOM - par ex.

$html = ''; 
if ($post['pid'] == 1337) { 
    $html .= '<a href="javascript:toggleDiv(\'myContent\');">'; 
} 
//add $html to the rest of the HTML outputted to the page 

function toggleDiv(id) { 
 
    $("#" + id).toggle().toggleClass('fadeIn'); 
 
}

.animated { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 2s ease-in; 
 
    -moz-transition: opacity 2s ease-in; 
 
    -o-transition: opacity 2s ease-in; 
 
    -ms-transition: opacity 2s ease-in; 
 
    transition: opacity 2s ease-in; 
 
} 
 
.fadeIn { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<a href="javascript:toggleDiv('myContent');"><i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i></a> 
 
<div class="animated" id="myContent" style="padding: 10px; display: none"> 
 
    reveal text here 
 
</div>

Answer 3

Ne pas vous dire $("#" + id).toggle();?

Si vous regardez la console, vous verrez un message d'erreur indiquant que myContent n'est pas défini.

Vous ne pouvez pas concaténer une chaîne ('#') avec une variable undefined en JavaScript.

function toggleDiv(id) { 
 
    $("#" + id).toggle(); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="javascript:toggleDiv('myContent');"> 
 
    <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i> 
 
</a> 
 
<div class="animated fadeIn" id="myContent" style="padding: 10px;"> 
 
    Reveal text here. 
 
</div>

Answer 4

Vous utilisez myContent au lieu de id dans la fonction, le remplacer et cela devrait fonctionner:

function toggleDiv(id) { 
 
    $("#" + id).toggle(); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="javascript:toggleDiv('myContent');"> 
 
    <i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i> 
 
</a> 
 
<div class="animated fadeIn" id="myContent" style="padding: 10px;"> 
 
    Reveal text here. 
 
</div>