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

你的意思是$("#" + id).toggle();？

如果您查看控制台，您将看到一条错误消息，指出myContent未定义。

您无法在JavaScript中将字符串（'#'）与undefined变量连接起来。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里有一些变化：

1. 添加jQuery来源。在脚本标记上方添加此脚本标记： <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
   注意：看来Polywhirl先生已将此添加到您的样本中。
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

＆＃13;
＆＃13;
function toggleDiv(id) {
  $("#" + id).toggle().toggleClass('fadeIn');
}
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您的函数采用参数 id ，但您在函数正文中使用 myContent 。像这样工作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您在函数中使用id而不是function toggleDiv(id) { $("#" + id).toggle(); }，替换它，它应该有效：

＆＃13;

＆＃13;

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

＆＃13;

for line in f:
    if word in line:
        print "Word found"
        break
else:
    print "Word not found"

＆＃13;

＆＃13;

＆＃13;