使用jQuery触发div的onmouseover时的未定义函数

时间:2014-06-02 14:19:26

标签: javascript php jquery html ajax

我收到未定义的函数错误。我已经在onmouseover上定义了这个函数,但是它没有用。

我的代码是

HTML

<div class="col2" onmouseover="show_info('<?php echo $sub_menu['page_id'];  ?>');" onmouseout="hide_info();">
<a href="#">
<img src="css/images/img1.png" />
<h3><?php echo $sub_menu['page_title'];  ?></h3>
</a>
</div>   

脚本

<script>
        function show_info(id)
        {
        alert('hiiii');
        var data = "page_id ="+id;
        $.ajax({
        url:"get_page_info.php", type:"post",data=data,cache:false,
        success: function(html)
            {
            document.getElementById('hide').style.display='none';
            document.getElementById('show').innerHTML=html;
            }
        });
        }

        function hide_info()
        {
            document.getElementById('hide').style.display='block';
            document.getElementById('show').style.display='none';
        }
    </script>

请建议

2 个答案:

答案 0 :(得分:3)

这里有语法错误

url:"get_page_info.php", type:"post",data=data,cache:false,

将其更改为

url:"get_page_info.php", type:"post",data:data,cache:false,

Working demo

您的data声明"page_id ="+id;也存在问题。您的意思是"page_id="+id;,或者确实是var data = {page_id: id};

以下是使用jQuery处理此问题的方法,以完全避免此问题。

<强> Working demo

HTML - 使用类并将信息存储在数据中。

<div class="col2 showinfo" data-showinfo="123"><h3>456</h3></div> 
<div id="show" style="display:none">show</div>
<div id="hide">hide</div>

所以在你的PHP中,这将是

<div class="col2 showinfo" data-showinfo="<?php echo $sub_menu['page_id']; ?>">

的jQuery

<script>
$(function(){

    $('.showinfo').hover(
        function(){ // first one is mouseover
            var data = {page_id: $(this).data('showinfo')};
            data.html="this is page " + data.page_id; // jsfiddle test
            console.log(data);
            $.ajax({
                url:"/echo/html/", // jsfiddle test
                type:"post",
                data:data,
                cache:false,
                success: function(html){
                    console.log(html);
                   $('#hide').toggle();
                   $('#show').toggle().html(html);
                }
            });            
        }, 
        function(){ // second one is mouseout
            $('#hide, #show').toggle();
        }
   );
});
</script>

答案 1 :(得分:1)

7中的脚本中的

语法错误data=data必须为data:data