Javascript动态的id在ajax php中

im not understand what this case's name, i have php with ajax and bootstrap css to get content from another page dynamically by using value but i show it inside of foreach. this is my code

我不明白这个案例的名称，我有一个带有ajax和bootstrap css的php，通过使用值动态地从另一个页面获取内容，但我在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>

my Ajax script

我的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>

From that php it display a lot of product list inline,and if i click that button it showing result of data (work well) but the problem is, i want to display that data response in bellow of button that i have clicked

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

For example, if i click (red square), content will display in bellow of button, and other list "view detail" bellow will moving down.

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

Thankyou

谢谢

2 个解决方案

#1

In your html you could echo your div next to your button (you might need some css here to keep your html from rendering in a weird way when you click the button):

在您的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 }?> 

Then edit your script to use the new id's for your divs:

然后编辑您的脚本以使用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>

#2

Ok.

好。

You have to put a div in your HTML. Right after each ViewMore element, and make it visible (css visible, or jQuery show() ) when you have clicked it.

你必须在HTML中添加div。在每个ViewMore元素之后，当您单击它时使其可见（css可见，或jQuery show（））。

Yep... instead of one only #txthint, make several div like

是的......而不是只有一个#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>

...

...

In your script :

在你的脚本中：

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