Question

我正在使用此代码切换可见性

var prevId;

function toggle_visibility(id) {
   if(prevId){
      $("#"+prevId).slideToggle("slow");
   }
   var e = document.getElementById(id);

      $(e).slideToggle("slow");
   prevId = id;

}

在出现的div上我使用它来显示数据库中的数据

<?php 
include"scripts/connect_to_mysql.php";
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");

$news="";
$sql=mysql_query("SELECT *
FROM `news` 
ORDER BY date DESC"); 
$newsCount=mysql_num_rows($sql);
if ($newsCount>0) {
    while($row=mysql_fetch_array($sql)){
        $id=$row["id"];
        $title=$row["title"];
        $text=$row["text"];
        $date=$row["date"];
        $news.=' <table width="800" border="0">
  <tr>
    <td style="width:150px;">' . $date . '</td>
    <td style="width:600px; overflow:hidden;"><a href="?id=' . $id . '#" onclick="toggle_visibility(\'news_det\');" style="color:#b19057;" >' . $title . '</a></td>
    <td style="width:50px"><a href="#" onclick="toggle_visibility(\'news_det\');" style="color:#000;">...more</a></td>
  </tr>
</table>
';
    }

}else {
    $news="No news available yet";
}

?>

问题在于，如果我点击此链接

<a href="?id=' . $id . '#" onclick="toggle_visibility(\'news_det\');" style="color:#b19057;" >' . $title . '</a>

切换开始但在第一次点击时中断，但在第二次点击时工作。

关于我做错的任何想法？

Answer 1

我有两个建议让您的代码解决您的问题

单程

将您的JavaScript功能更改为此类

var prevId;

function toggle_visibility(id, newsId) {
    if (prevId) {
        $("#"+prevId).slideToggle("slow");
    }
    $("#"+id).slideToggle("slow");
    if (id=="news_det" && newsId!=undefined) {
        var val=$("#det_"+newsId).val();
        $('#news_detDiv').html(val);//Where you are putting text that div id
    }
    prevId = id;
    return false;
}

将您的html代码段从$news变量更改为此

$news.='<table width="800" border="0">
    <tr>
        <td style="width:150px;">' . $date . '</td>
        <td style="width:600px; overflow:hidden;"><a href="#" onclick="toggle_visibility(\'news_det\', '.$id.');" style="color:#b19057;">' . $title . '</a></td>
        <td style="width:50px"><a href="#" onclick="toggle_visibility(\'news_det\', '.$id.');" style="color:#000;">...more</a></td>
        <input type="hidden" value="'.$text.'" id="det_'.$id.'">
    </tr>
</table>';

通过这种方式，您可以保存服务器电话，因为您只会在页面中存储所有文字，并且您将始终在点击标题时看到相关的帖子数据。更多。此外，你的效果也会奏效。

第二种方式

点击标题＆amp ;,你应该使用JQuery AJAX调用更多从服务器获取数据，而不是使用刷新页面。

快乐编码!!!

结合锚点，网址变量和切换可见性

1 个答案: