Question

我尝试使用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（），但只显示第一个元素，如果我对第二个元素数据执行鼠标操作不会更改。

Answer 1

试试这个：

将您的脚本放在正文标记之后：

<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>";


?>

Answer 2

通常，div或任何DOM必须具有唯一的ID值。尝试使用类选择器（。）而不是ID选择器（＃）。

jQuery在div mouseover上更改输入值

2 个答案: