单击javascript onclick时，php搜索不会清除

Question

这就是我所拥有的 - 一个 javascript onclick 事件，它将从我的 MySQL 数据库数据中解析 json 并在有人点击座位时显示它。

 var jsonData = <?php echo json_encode($array); ?>;

function displayInfoForDiv(i){
    document.getElementById('fname').innerHTML = jsonData[i].first_name;
    document.getElementById('lname').innerHTML = jsonData[i].last_name;
    }

输出

    <?php while ($row = mysql_fetch_array($sql)){ ?>
    <p><span id="fname"><?php echo $row['first_name']; ?></span></p> 
    <p><span id="lname"><?php echo $row['last_name']; ?></span></p>
    <?php } ?>

当您尝试查找名称时，PHP 用于我的搜索框 - 我正在使用它

     $sql = mysql_query("select * from people where first_name like '%$term%' OR last_name LIKE '%$term2%'");

所以我遇到的问题是，当我搜索马特时，会显示一个以上的结果。说：

马特 哈塞尔贝克
马特 呸

但是如果我使用onclick事件点击joe的座位，会显示如下：

乔 褶边
马特 呸

所以问题是当我触发 onClick 事件时搜索结果会保留，但第一个会改变。

我的问题是，当我点击一个座位来清除搜索结果并只显示一个但当我进行搜索以显示相似名称时，有没有办法。

我使用 PHP 和 JS 调用相同的数据，因为 JS 只有一个范围的楼层，而 php 正在从数据库中获取所有内容。

希望这很清楚，感谢您的任何意见。

Answer 1

这里有两个问题。

1. 您多次为 id 属性使用相同的值。
2. 您的结果设置存在逻辑缺陷

问题 1 的解决方案

将id属性改为class属性

当您在 javascript 中使用 document.getElementById 时，它会返回具有该 id 的第一个元素。 这意味着如果您有多个具有相同值的 id，则只会选择第一个元素。所以你的函数应该改成如下

function displayInfoForDiv(i){
document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name;
document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name;
}

问题 2 的解决方案

• 使用模板获取结果

• 将所有结果包装在一个 div 标签中

通过将结果包装到 div 标签中，您将能够通过清除该 div 标签的 html 来清除结果。

<div id='Results'>
   <?php while ($row = mysql_fetch_array($sql)){ ?>
   <p><span class="fname"><?php echo $row['first_name']; ?></span></p> 
   <p><span class="lname"><?php echo $row['last_name']; ?></span></p>
   <?php } ?>
</div>

<script>
function clearResults()
{
    document.getElementById('Results').innerHTML='';
}
</script>

要使用结果模板，我建议underscore.js

因此，满足您需求的模板如下所示：

<script id='result-template' type="text/x-jquery-tmpl">
    <p><span class="fname">${first_name}</span></p> 
    <p><span class="lname">${last_name}</span></p>
</script>

要使用该模板，您需要执行以下操作：

下面的代码假设你已经包含了 underscore.js

function LoadResults(jsonData)
{
    _.templateSettings = {
        interpolate: /\$\{(.+?)\}/g
    };
    var output='',
    resultDiv=document.getElementById('Results');
    template= _.template(
        document.getElementById('result-template').innerHTML
        );

    clearResults();

     for(x in jsonData)
     {
        resultDiv.innerHTML+=template(jsonData[x]);
     }
}