Question

我有一个关于这个单元格的表格：

    <td>
        <DIV align='center' onmouseover='dettaglio(<?php echo $cdclie;?>)' onmouseout='chiudiDettaglio()'>0</DIV>
    </td>

我有javascript：

＆＃13;

<script>
// codice per mostrare il dettaglio
function dettaglio()
{
    tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ;  line-height: 200%;">'
            + 'Client' + ' ' + 'First and last name' + '</div>';

    $("body").append(tooltip);
    $(this).mouseover(function (e)
    {
        $(this).css('z-index', 10000);
        $('.tooltiptopicevent').fadeIn('500');
        $('.tooltiptopicevent').fadeTo('10', 1.9);
    }).mousemove(function (e)
    {
        $('.tooltiptopicevent').css('top', e.pageY + 10);
        $('.tooltiptopicevent').css('left', e.pageX + 20);
    });
}
//  
function chiudiDettaglio()
{
    $(this).css('z-index', 8);
    $('.tooltiptopicevent').remove();
}
</script>

＆＃13;

在javascript中，我打算调用AJAX来检索一个JSON对象，然后由onmouseover函数显示。

Answer 1

最好以不同方式添加侦听器：

<div class="codice-cliente" align='center' data-clie="<?php echo $cdclie; ?>">0</div>

现在在javascript中添加了监听器：

$('.codice-cliente').on('mouseover', function(event) {

    // First step. Check if you can see this. Remove if it works.
    $(this).css({ backgroundColor: 'red' });

    // Then proceed. Here you recover the codice-cliente.
    var cdclie = $(this).attr('data-clie');

    console.log("Codice cliente recuperato: ", cdclie);

    // Here your AJAX call. THIS function stops here. The rest
    // will need to be done by a callback.
    $.post(
        '/dettaglio/cliente.php',
        { codice: cdclie },
        function(risposta) {
            console.log('risposta del server', risposta);

            // Here you add the tooltip control code.
        }
    );
});

cliente.php脚本将收到$_POST['codice']。

使用Firebug或Chrome开发者工具，您可以检查控制台日志并验证它是否有效，或者为什么没有。

Answer 2

$（this）可以在内部使用，例如回调函数，但不能在全局范围内使用（这是窗口对象）。将它在dettaglio和chiudiDettaglio中更改为某个选择器，例如$（＆＃34; table＆＃34;）。

Answer 3

jQuery AJAX http://api.jquery.com/jquery.ajax/是你的朋友。

实质上，您可以将请求正文或查询参数发送到服务器。

假设有PHP正在执行，它可能通过直接回声明显返回一些JSON .... 您可以对库进行编组/解组，也可以自己将域对象作为json。只需要术语。所以你可以更轻松地抓住它并与其他专家交谈。

在你的JS中，你可以（也许你当然应该）定义一个回调（读取jquery AJAX api描述）它正等着你。

你可以使用你已经知道的$（selector）jQuery Object，并将json从服务器“注入”到dom / html元素中。

并且可能检查序列化和编组以获得整体方便性。而且....

onmouseover功能不起作用

3 个答案: