javascript - jQuery 在 div 鼠标悬停时更改输入值

标签 javascript php jquery html css

我正在尝试使用 jQuery 鼠标悬停更改输入值。

场景:我有 5 个具有不同颜色和用户名的 div。当鼠标悬停在 div 上时,输入文本会根据数据库值更改(对于颜色输入背景颜色)数据,当更改 div 时,文本会显示新数据。

使用 PHP 我回显脚本的一部分来处理鼠标悬停功能

<?php 
    $myId = '1';
    $uname = 'user1';
    $ucolor = 'FFFFFF';
    echo "<script>
            $('$myId').mouseover( function () {
                $('#uname').val('" . $uname . "'),
                $('#ucolor').val('" . $ucolor ."'),
                $('#ucolor').css('background-color', '" . $ucolor . "')
            })
        </script>";

如果我将 mouseover() 更改为 hover(),但只显示第一个元素,如果我将鼠标悬停在第二个元素上,则数据不会改变。

最佳答案

试试这个:

将脚本放在 body 标签之后:

<body>
<div class="hh" id="1"></div>
<input type="text" id="uname" />
<input type="text" id="ucolor" />

<div class="hh" id="2"></div>
</body>
<?php 
    $myId = '1';
    $uname = 'user1';
    $ucolor = 'FFFFFF';
    echo "<script>
            $('#$myId').mouseover( function () {  // add # here
                $('#uname').val('" . $uname . "'),
                $('#ucolor').val('" . $ucolor ."'),
                $('#ucolor').css('background-color', '" . $ucolor . "')
            })
        </script>";

$myId = '2';
$uname = 'user2';
$ucolor = 'FFF555';
echo "<script>
        $('#$myId').mouseover( function () { console.log('fdgfdg')
            $('#uname').val('" . $uname . "'),
            $('#ucolor').val('" . $ucolor ."'),
            $('#ucolor').css('background-color', '" . $ucolor . "')
        })
    </script>";


?>

关于javascript - jQuery 在 div 鼠标悬停时更改输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37188411/

相关文章:

JavaScript IE 使用 form.submit() 双重提交

php - Laravel 迁移已完成,但在数据库中并不总是可见

php - 计算日期时正确使用 PHP 和 MySQLi 查询

javascript - jquery ajax 成功 php while

javascript - 我可以将 JavaScript 数据从 PHP 发送到 Html 吗?

javascript - 尝试全屏时 Cocos2d-js 卡在启动屏幕上

javascript - Vue js "this"被 image.onload "this"覆盖

javascript - 用javascript插入div

带有简单功能导航和 "code hinting"的 JavaScript 编辑器

javascript - 加载时的 jquery 迷你图高亮栏