jQuery 在 div 鼠标悬停时更改输入值答案

【问题标题】：jQuery change input value on div mouseoverjQuery 在 div 鼠标悬停时更改输入值
【发布时间】：2016-09-08 09:01:44
【问题描述】：

我正在尝试使用 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>";

如果我将鼠标悬停（）更改为悬停（），但仅显示第一个元素，如果我将鼠标悬停在第二个元素上数据不会改变。

【问题讨论】：

您的 jquery 中缺少一个 # 来表示 id
$(' . $myId . ').mo...
添加 $(' # " . $myID . "').mo... 似乎有效，但仅适用于第一个元素
一个 ID 在 html 中是不同的，所以使用 . 表示类：$(.' . $myId . ').mouseover([...])

标签： javascript php jquery html css

【解决方案1】：

试试这个：

把你的脚本放在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>";


?>

【讨论】：

脚本已经在body标签之后，抱歉没有指定，这是一段代码
在鼠标悬停事件中添加#
看不懂，在 (function() { # 后面加#会导致Uncaught SyntaxError: Unexpected token ILLEGAL
no in $('#$myId').mouseover( function () { // 告诉在 $myId 之前添加#
没关系，我正在这样做 $('#" .$myId . "').mouseover( function () {

【解决方案2】：

通常，div 或任何 DOM 都必须具有唯一的 ID 值。尝试使用类选择器 (.) 而不是 ID 选择器 (#)。

【讨论】：

使用类选择器不会改变结果，我只得到第一个元素并且鼠标悬停时不会改变
尝试将代码放在 $(document).ready(function(){ /* 你的代码 */ });