Question

我正在使用jquery手风琴来列出收到/发送的所有电子邮件。标题（h3 + a）显示对象，内容（div）是邮件文本。

HTML手风琴：

<div id="accordion">
      <div>
            <h3><a href="#">object 1</a></h3>
            <div>mail 1 text</div>
      </div>
      <div>
            <h3><a href="#">object 2</a></h3>
            <div>mail 2 text</div>
      </div>
      <div>
            <h3><a href="#">object 3</a></h3>
            <div>mail 3 text</div>
      </div>
</div>

手风琴脚本功能：

$(function() {
        $( "#accordion" ).accordion({
            autoHeight: false,
            header: "h3",
            navigation: true
        });
    });

问题：

我只想在邮件标题上单独请求我的SQL数据库，并避免预加载所有邮件。在我的情况下，另一个非常重要的问题是将邮件标记为“已读”或“未读”。 SQL数据库中有一列用于此目的。因此，当我在手风琴的标题上显示时，邮件需要更改为“读取”状态。

在使用手风琴之前，我使用简单链接重新加载所有页面。我对PHP / SQL没有任何问题，但我在javascript / jquery或者ajax中不是很好......

SQL请求（简化）：

$sql = "SELECT mail_object, mail_text FROM table_mail ";
$req = mysql_query($sql);

SQL更新读取状态（简化）：

$sql_2 = "UPDATE table_mail SET mail_read=1 ";
$req_2 = mysql_query($sql_2);

那么，当我在标题上引用时，有没有办法执行此代码？

之后，我会问你如何更改标题样式以区分已读/未读邮件（例如以粗体显示，或更改背景图像/颜色）。

谢谢。 ++

Answer 1

这个怎么样

$("a").one('click', function(){
    $.post("url_where_php_query_db_and_update_at_the_same_time", 
     $(this).text(),
     function(xhr){
       var mailText = xhr.responseText;
       $(this).next("div").text(mailText);  //update the mail content
       //now set your mail to another class  
       $(this).addClass("read"); 
       //you need to have css to set "read" class to different style
       //e.g. a.read { font-weight: normal;}
    });

Answer 2

好的，使用手风琴标题上的onclick，post函数可以正常工作：

<div id="accordion">
  <div>
        <h3><a onclick=$.post('update_to_read.php') href="#">object 1</a></h3>
        <div>mail 1 text</div>
  </div>

我现在将尝试添加邮件内容的查询。

THX。

将SQL请求添加到Jquery手风琴标题

2 个答案: