在ajax php中通过id动态的Javascript

Question

我不明白这个案例的名称，我有 php with ajax 和 bootstrap css 通过使用 value 从另一个页面动态获取内容，但我在 foreach 中显示它。 这是我的代码

<?php foreach($a as $b){?>
  <button onclick="showUser(this.value)" value="<?php echo $b->p_slug;?>">View Detail</button>
<?php }?> 

<div id="txtHint"></div>

我的 Ajax 脚本

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","<?php echo base_url('testing');?>/"+str,true);
  xmlhttp.send();
}
</script>

从那个 php 中它显示了很多内联的产品列表，如果我点击那个按钮，它会显示数据的结果（工作得很好） 但问题是，我想在我点击的按钮下方显示该数据响应

例如，如果我点击（红色方块），内容将显示在按钮下方，而其他列表“查看详细信息”下方将向下移动。

谢谢

Answer 1

在您的 html 中，您可以在按钮旁边回显您的 div（您可能需要一些 css 来防止您的 html 在您单击按钮时以奇怪的方式呈现）：

<?php foreach($a as $b){?>
  <button onclick="showUser(this.value,<?php echo $b->p_slug ?>)" value="<?php echo $a->p_slug;?>">View Detail</button>
  <div id="txthint<?php echo $b->p_slug ?>"></div>
<?php }?> 

然后编辑你的脚本，为你的 div 使用新的 id：

<script>
function showUser(str,slug) {
  if (str=="") {
    document.getElementById("txtHint" + slug).innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint" + slug).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","<?php echo base_url('testing');?>/"+str,true);
  xmlhttp.send();
}
</script>

Answer 2

好的。

您必须在 HTML 中放置一个 div。 在每个 ViewMore 元素之后， 并在您单击它时使其可见（css 可见或 jQuery show() ）。

是的...不是只有一个#txthint，而是制作几个类似的div

 <div class="txthint" id="4(or whatever you want)">...</div>
 <div class="txthint" id="5(or whatever you want)">...</div>
 <div class="txthint" id="6(or whatever you want)">...</div>
 <div class="txthint" id="7(or whatever you want)">...</div>

...

在你的脚本中：

 <script>
//init first - hide all
document.getElementsByClass("txtHint").style.display="none";

    //function
function showUser(str) {
      if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
      }
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {


           //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    document.getElementById("4orwhateveryouwant").innerHtml=xml...(idem);
    **

    //here is it !
        //1. hide all
    document.getElementsByClass("txtHint").style.display="none";
    //2. show clicked
    document.getElementById("4orwhateveryouwant").style.display="block";
            }

**
      }
      xmlhttp.open("GET","<?php echo base_url('testing');?>/"+str,true);
      xmlhttp.send();
    }
    </script>