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;
});

});

正如你所看到的，我认为命令一个类用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。希望你明白我的意思。

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

1 个答案: