php搜索赢得'；单击javascript onclick时无法清除

这就是我所拥有的——一个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;
    }

所以我遇到的问题是，当我搜索Matt时，会出现多个结果。说：

马特 哈塞尔贝克
马特 砍

但是如果我使用onclick事件并单击joe的座位，它将显示如下：

乔 褶边
马特 砍

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

我的问题是，当我点击一个座位时，是否有办法清除搜索结果并仅显示该座位，但当我进行搜索时，是否有办法显示相似的姓名

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

---

希望这是明确的，并感谢您的任何意见

这里有两个问题

多次对id属性使用相同的值

您的结果设置在逻辑上有缺陷

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

---

这里有两个问题

多次对id属性使用相同的值

您的结果设置在逻辑上有缺陷

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

---

请不要使用

mysql.*

函数来编写新代码。它们不再得到维护，社区已经开始。看到了吗？相反，你应该学习并使用或。如果你不能决定哪一个，我会帮你的。如果您选择PDO。还可以查看如果搜索

O'Neil

，会发生什么情况？我猜你忘了。谢谢你的更正-现在就修复它们。请不要使用

mysql.*

函数来编写新代码。它们不再得到维护，社区已经开始。看到了吗？相反，你应该学习并使用或。如果你不能决定哪一个，我会帮你的。如果您选择PDO。还可以查看如果搜索

O'Neil

，会发生什么情况？我猜你忘了。谢谢你的更正-现在就修复它们。首先，谢谢你的帮助。这意味着你花了很多时间来回应。我只有几个问题。我使用ID是因为在onClick事件中，每个ID都是不同的。我尝试了你的代码，但是我丢失了onClick函数，它什么也不显示。我确实更改了您所说的内容，添加了underline.js，并将解决方案2中的所有js放在results DIV下。我确实附加了很多js脚本，这可能是问题所在吗？首先，感谢您的帮助。这意味着你花了很多时间来回应。我只有几个问题。我使用ID是因为在onClick事件中，每个ID都是不同的。我尝试了你的代码，但是我丢失了onClick函数，它什么也不显示。我确实更改了您所说的内容，添加了underline.js，并将解决方案2中的所有js放在results DIV下。我确实附加了很多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>

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]);
     }
}