关于在php中的while循环调用JS问题

Question

while($row=mysql_fetch_assoc($res)){
echo <<< HTML
<div class="article">
<div class="article_title"><p>$row[article_title]</p></div>
<div  id="article_body">$row[article_body]</div>
<script> 
function yichu(){ 
var o = document.getElementById("article_body"); 
var s = o.innerHTML; 
var p = document.createElement("span"); 
var n = document.createElement("a"); 
p.innerHTML = s.substring(0,100); 
n.innerHTML = s.length > 100 ? "..." : ""; 
n.href = "###"; 
n.onclick = function(){ 
if (n.innerHTML == "..."){ 
n.innerHTML = "收起"; 
p.innerHTML = s; 
}else{ 
n.innerHTML = "..."; 
p.innerHTML = s.substring(0,100); 
} 
} 
o.innerHTML = ""; 
o.appendChild(p); 
o.appendChild(n); 
}
yichu(); 
</script> 
</div>
HTML;
}经测试 循环没问题，但是 JS代码只是调用了一次而已
如果改成这样，就可以调用相应的循环次数
<script>
function yichu(){ 
 document.write("欢迎")
yichu(); 
</script> 求解释！！！

Answer 1

你只需要记得 php是服务器端的运作 js是客户端的运作就行了
要循环应该在js 的客户端做循环 如果有数据使用php 输出数据保存到页面 或者js ajax 来取得数据再输出到页面

Answer 2

不太明白你为什么要绕这么大圈子。id，函数名不能重复
修正了一下你的逻辑<script> 
function yichu(o){
// 这句被注释掉，对象以参数传递 
// var o = document.getElementById("article_body");
 
var s = o.innerHTML; 
var p = document.createElement("span"); 
var n = document.createElement("a"); 
p.innerHTML = s.substring(0,100); 
n.innerHTML = s.length > 100 ? "..." : ""; 
n.href = "###"; 
n.onclick = function(){ 
  if (n.innerHTML == "..."){ 
      n.innerHTML = "收起"; 
      p.innerHTML = s; 
  }else{ 
      n.innerHTML = "..."; 
      p.innerHTML = s.substring(0,100); 
  } 
} 
o.innerHTML = ""; 
o.appendChild(p); 
o.appendChild(n); 
}
</script> <?php
while($row=mysql_fetch_assoc($res)){echo <<< HTML
 <div class="article">
   <div class="article_title"><p>{$row['article_title']}</p></div>
   <div name="article_body">{$row['article_body']}</div>
 </div>
HTML;
}
?>
<script>
var article_bodys = document.getElementsByName('article_body');
for( var key in  article_bodys)
{
    yichu( article_bodys[key] );
}
</script>

Answer 3

应该是id重名了，那我用class怎么解决？我对JS不太熟，不会创建一个class的元素

Answer 4

通过class来获取元素很复杂。因为js中没有原生的 document.getElementsByClassName 函数。需要手写。

Answer 5

我Js也很烂，才发现一个奇怪的现象，那么Js的for循环会多循环一次
所以改一下下面那段Js代码
var article_bodys = document.getElementsByName('article_body');
for( var key in  article_bodys)
{
    // 加个判断，如果是一个html dom对象才能用于此函数
    if(typeof article_bodys[key] == 'object')
        yichu( article_bodys[key] );
}再没发现什么问题了，在我的chrome上测试通过。
如果有什么问题再贴出来，跟着学习