如果我使用 PHP 生成 ID，为什么数据目标在引导程序中不起作用?

Question

我正在使用引导程序列出一些扬声器的详细信息。例如，假设我的代码如下：

<?php
global $wpdb;
$result = $wpdb->get_results("SELECT * FROM  `Invited_Speakers_auto`   ORDER BY `Last_Name` ASC;");
foreach ( $result as $print)   { ?>

<div class="DemoBS2" > 

<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $print->Unique_Id;?>" >Click to Toogle</button>
<div id="<?php echo $print->Unique_Id;?>" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>

</div>

<?php } ?>

它只给了我切换按钮，但它不起作用。

错误是什么。单击此处查看错误。

提前谢谢。

编辑：

当我运行上述查询和 php 代码时，第一个条目得到以下内容。

<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501
">Click to Toogle</button>
<div id="17ICLAA501
" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>

</div>

我不知道，为什么数据目标和 id 中的空格都位于 $Unique_Id 之后。

是不是这东西不允许助推器不起作用？

注意：

我已经检查了唯一 id 没有在任何地方重复。

Answer 1

您的问题是数据目标使用 jQuery 来选择项目。此处的空格和新行不是 ID 的一部分。但属性 ID 包含空格和换行符作为 ID 的一部分。因此，数据目标会照顾 ID 17ICLAA501，但它不存在，因为 ID 等于 17ICLAA501

在您的新示例中，您忘记截断空格和新行 (http://iclaa2017.com/test-template/( 的 id：

这是您的 html 结果：

<div class="DemoBS2"> 
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501
">Click to Toogle</button>
<div id="17ICLAA501
" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>
</div>

这意味着您没有干净的 ID。

结果应该是：

<div class="DemoBS2"> 
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#17ICLAA501">Click to Toogle</button>
<div id="17ICLAA501" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>
</div>

我建议您也使用chrome开发人员工具，您可以在其中轻松实时编辑并查看结果。也请投票我的答案;)

尝试将 $print->Unique_Id 替换为 preg_replace("/\s+/"， "， $print->Unique_Id(;

所以你的代码应该是这样的：

<?php
global $wpdb;
$result = $wpdb->get_results("SELECT * FROM  `Invited_Speakers_auto`   ORDER BY `Last_Name` ASC;");
foreach ( $result as $print)   { ?>

<div class="DemoBS2" > 

<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo preg_replace("/s+/", "", $print->Unique_Id);?>" >Click to Toogle</button>
<div id="<?php echo preg_replace("/s+/", "", $print->Unique_Id);?>" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>

</div>

<?php } ?>

Answer 2

通过调查您的在线示例，我可以看到Unique_Id没有设置为 DOM 元素。这样数据目标也被设置为 # 和 id 空字符串。您需要调查返回空字符串的$print->Unique_Id。当您设置数据目标和 id 时，它有效。

<?php echo $print->Unique_Id;?> gives a empty string in your example page.

您的工作示例的 html 结果：

<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>
<div id="toggle-example" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>
<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#toggle-example1">Click to Toogle</button>
<div id="toggle-example1" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>
</div>

您的 NOT 工作示例的 html 结果：

<div class="DemoBS2"> 

<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn" data-toggle="collapse" data-target="#">Click to Toogle</button>
<div id="" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>

</div>

也许试试这个：

<?php $uuid = uniqid(); ?>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $uuid;?>">Click to Toogle</button>
<div id="<?php echo $uuid;?>" class="collapse in">
<p>If you don't like something, <b>change it</b>. 
If you can't change it, change your <b>attitude</b>.</p></div>
</div>