使用jquery和ajax隐藏基于db的某些结果

Question

我有HTML列表，如下所示：

<ul>
  <li>something</li>
  <li>something1</li>
  <li>something2</li>
<ul>

<div class="randomwrapper">
   <img src="<?php echo $databaseresult[$i];?>">
   <img src="<?php echo $databaseresult[$i];?>">
   <img src="<?php echo $databaseresult[$i];?>"> // result looks like : ../assets/images/20584878157.jpg
</div>

然后我有一张看起来像的表：

是否可以使用ajax创建jquery函数，该函数将发送f.e.:##34; something1＆＃34; to＆＃34; process.php＆＃34;（我将创建以处理数据的PHP文件）将返回图像名称（22287895.jpg），然后jquery函数将隐藏任何具有＆＃34的图像; imgname＆＃34;（22287895.jpg）在里面？

我能够创建process.php但我没有jquery和ajax的技能。我甚至不知道它是否可能。

感谢您提供任何可能的帮助/参考

Answer 1

如果我理解得对，你可以这样做：

function getImageName(name){
// do a request that will return the "imgname" from the "name"
}

function hideImage(src){
    let img = document.querySelector(`img[src=${src}]`);

    if(img !== null)
        img.style.display = 'none'; 
}

// then you can do
hideImage(getImage("something1"));

Answer 2

不需要AJAX请求，您的数据库中有id，name（某些人）也有。{/ p>

通过从数据库中提取li然后循环搜索结果，使id, name动态化：

<ul class"somethings">
   <?php
   foreach ( $records as $rec ) {
        echo "<li data-recordid=\"{$rec['id']}\">{$rec['name']}</li>";
    }
    ?>
</ul>

data-recordid包含每个li的数据ID。

在图片上使用来自DB的id创建动态唯一ID：

<img id="image-<?php echo $databaseresult['id'];?>" src="<?php echo $databaseresult['src'];?>">

我还建议您从数据库中获取所有图像

Rest是jQuery：

$(function(){ // checking for DOM to be ready
    $(".somethings li").click(function(){
        var recordid = $(this).data('recordid');
        $("#image-" + recordid).hide();
    });
});