javascript - 鼠标悬停时更改单独 div 中的图像，动态填充图像

Question

我又无计可施了。我的任务是为我公司的网站制作一个下拉菜单，该菜单会从我们的 MySQL 数据库动态填充产品列表项，并在鼠标悬停在列表项链接上时在单独的 div 中显示产品的缩略图。这个作业大部分是没有问题的。我的产品列表项根据我设置的参数填充我的下拉列表，并且我的 div 和图像的行为与鼠标悬停时的行为相同。

但是，我一直在弄清楚如何根据悬停的列表项链接动态填充 onmouseover 缩略图。

这是我的静态 html 的片段:

<ul class="subcategories">        
<li><a class="thumbimg" href="PRODUCT PAGE URL" title="PRODUCT MODEL_ID" style="width:144px;height=22px;">MODEL_ID</a></li>
</ul>

<div class="showimg" width="200px" height="200px"></div>

出于我的目的，我在以下链接中改编了 jQuery 脚本: Script at jsfiddle

这是改编后的脚本:

var thumbimg_hover_bg = '#f6b71c'; 
var thumbimg_inactive_bg = 'none';

var showimg_thumbimg_bg = 'url("image.jpg") no-repeat';
var showimg_inactive_bg = 'none';


$(document).ready(function(){

var keep_thumbimg_highlighted = false;

$('.thumbimg').mouseover(function(){
    $('.thumbimg').css('background', thumbimg_hover_bg);
    $('.showimg').css('background', showimg_thumbimg_bg);
});
$('.thumbimg').mouseout(function(){
    if (keep_thumbimg_highlighted) {
        $('.thumbimg').css('background', thumbimg_hover_bg);
        $('.showimg').css('background', showimg_thumbimg_bg);
    } else {
        $('.thumbimg').css('background', thumbimg_inactive_bg);
        $('.showimg').css('background', showimg_inactive_bg);
    }
});
$('.thumbimg').on('click', function(){
    keep_thumbimg_highlighted = true;
});

});

如果我想提取静态“image.jpg”，如上所述，该脚本可以正常工作。但是，如果我尝试用提取产品型号 ID 的 php echo 函数替换“thumbimg”(链接类)和“image.jpg”，脚本就会中断(是的，我的 .jpg 图像位于我的服务器上) 。可能我不应该在 jQuery 脚本中插入 php 函数(我知道还有很多东西要学)。然而，到目前为止，我主要使用 php 函数在我们的网站上执行动态操作。 (不过，找不到在 php 中执行此操作的方法。)

作为引用，这里是我的 html 和脚本，其中插入了 php 函数:

<ul class="subcategories">
<?php do { ?>
<li><a href="Product1.php?Product_ID=<?php echo $row_rsProducts['Product_ID']; ?>" class="<?php echo $row_rsProducts['Model_ID']; ?>" title="<?php echo $row_rsProducts['Model_ID']; ?> <?php echo $row_rsProducts['ModelName']; ?>"><?php echo $row_rsProducts['Model_ID']; ?></a></li>
<?php } while ($row_rsProducts = mysql_fetch_assoc($rsProducts)); ?>
</ul>

var <?php echo $row_rsProducts['Model_ID']; ?>_hover_bg = '#f6b71c'; 
var <?php echo $row_rsProducts['Model_ID']; ?>_inactive_bg = 'none';

var showimg_<?php echo $row_rsProducts['Model_ID']; ?>_bg = 'url("images/<?php echo $row_rsProducts['Image']; ?>") no-repeat';
var showimg_inactive_bg = 'none';


$(document).ready(function(){

var keep_<?php echo $row_rsProducts['Model_ID']; ?>_highlighted = false;

$('.<?php echo $row_rsProducts['Model_ID']; ?>').mouseover(function(){
    $('.<?php echo $row_rsProducts['Model_ID']; ?>').css('background', <?php echo $row_rsProducts['Model_ID']; ?>_hover_bg);
    $('.showimg').css('background', showimg_<?php echo $row_rsProducts['Model_ID']; ?>_bg);
});
$('.<?php echo $row_rsProducts['Model_ID']; ?>').mouseout(function(){
    if (keep_<?php echo $row_rsProducts['Model_ID']; ?>_highlighted) {
        $('.<?php echo $row_rsProducts['Model_ID']; ?>').css('background', <?php echo $row_rsProducts['Model_ID']; ?>_hover_bg);
        $('.showimg').css('background', showimg_<?php echo $row_rsProducts['Model_ID']; ?>_bg);
    } else {
        $('.<?php echo $row_rsProducts['Model_ID']; ?>').css('background', <?php echo $row_rsProducts['Model_ID']; ?>_inactive_bg);
        $('.showimg').css('background', showimg_inactive_bg);
    }
});
$('.<?php echo $row_rsProducts['Model_ID']; ?>').on('click', function(){
    keep_<?php echo $row_rsProducts['Model_ID']; ?>_highlighted = true;
});

});

如您所见，我认为命令 a 类动态填充 MODEL_ID 并告诉 javascript 函数从 onmouseover 链接中提取该名称将导致它提取正确的图像。然而，根本没有骰子。

请帮助我了解出了什么问题。抱歉，我对这类事情不太了解。

Answer 1

我认为你可以在html中使用数据属性(HTML5)，让js获取该数据并稍后在事件中操作它。

例如

<ul>
  <li><a class="thumbimg" href="PRODUCT PAGE URL1" title="PRODUCT MODEL_ID1" style="width:144px;height=22px;background: url(image1.jpg) no-repeat;" data-image="image1.jpg" data-bgcolor="'#ffaabb">MODEL_ID1</a></li></li> 
  <li><a class="thumbimg" href="PRODUCT PAGE URL2" title="PRODUCT MODEL_ID2" style="width:144px;height=22px;background: url(image2.jpg) no-repeat;" data-image="image2.jpg" data-bgcolor="'#f6b71c">MODEL_ID2</a></li></li>
</ul> 

然后你的js只需提取数据，例如:

$('.thumbimg').mouseover(function(){
    thumbimg_hover_bg = $(this).data('bgcolor');
    showimg_thumbimg_bg = $(this).data('image');

    $(this).css('background', thumbimg_hover_bg);
    $('.showimg').css('background', 'url('+showimg_thumbimg_bg+') no-repeat');
});
//... etc

所以这个想法是你的php代码不写你的JS，而只写HTML。希望你明白我的意思。