Onclick div работает только для одного пользователя

Question

Я использую этот код на своем форуме postbit. Я пытаюсь создать элемент div, чтобы показать текст для каждого пользователя, но я могу заставить его работать только для первого пользователя.

Другие div всегда открыты. Я не уверен, где я ошибаюсь.

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

Ваша функция принимает параметр идентификатор, но вы используете MyContent я тело функции. Как это работает:

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

Несколько изменений здесь:

1. Добавьте jQuery источник. Добавьте этот сценарий выше вашего тега скрипта: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   Примечание: похоже, что г-н Поливирл добавил это к вашему образцу.
2. Использовать ID параметра в функции toggleDiv() т.е. $("#"+id).toggle();, если MyContent не определен в другом месте, то это будет не определено так $("#" + myContent).toggle(); вызовет ошибку.
3. Чтобы содержимое было скрыто, добавьте стиль display: none.
4. Измените имя класса fadeIn и добавьте его после переключения элемента с помощью .toggleClass().

См. Обновленный пример ниже.

Что касается отображения сообщения для первого пользователя, нам необходимо знать, что представляет собой ваша бизнес-логика для этой концепции. Можете ли вы рассказать, что такое pid (или uid, данный this list of fields in their API for posts) Значение первого пользователя, возможно, основано на данном списке сообщений в MyBB? Вы упомянули, что этот код находится в верхней части страницы: <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>. Так что, если вы знали значение pid (например, 1337), вы могли бы условно добавить код для добавления сообщения в DOM - например.

$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

Вы не значит $("#" + id).toggle();?

Если вы посмотрите на консоль, вы увидите сообщение об ошибке, указывающее, что myContent не определено.

Вы не можете объединить строку ('#') с переменной undefined в 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

Вы используете myContent вместо id внутри функции, заменить, что и она должна работать:

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>