0

所以我有一个脚本，当你鼠标输入一个 div 时，它会将 .html 文件加载到另一个 div 中。我想要的是让这个脚本与许多 div 一起工作。我真的不想为每个图像编写单独的脚本，而是使用基于 div 名称的变量。假设我有一个名为 p3 的 div，当我将鼠标悬停在上面时，我希望脚本加载 p3.html。这是向您展示我的意思的脚本：

<script type="text/javascript">
$(document).ready(function () {
    $('#p1').mouseenter(function () {
        $('#description').load('descr/p1.htm');
    });
    $('#p1').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

任何提示将不胜感激。

4

6 回答 6

1

您可以为所有图像添加一个公共类，并这样做： 

$document).ready(function () {
    $('.class').mouseenter(function () {
    var id = this.id;
    $('#description').load('descr/' + id + '.htm');
    });
    $('.class').mouseleave(function () {
    $('#description').load('descr/portDefault.htm');
});
于 2013-10-21T17:24:48.210 回答
0

我想这取决于 div 的生成方式。我要做的是在 div 上设置一个属性来表示目标 htm 页面。

就像是

<div data-targetPage='p1.htm' class='hoverImage'>stuff</div>

然后jquery可以是这样的

$(document).ready(function () {
    $('.hoverImage').mouseenter(function () {
        $('#description').load($(this).attr('data-targetPage'));
    });
    $('.hoverImage').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

编辑：更新以反映所有评论。

于 2013-10-21T17:24:38.310 回答
0

试试这个：

$(document).ready(function() {
    $('img').mouseenter(function() {
        $('#description').load('descr/' + this.src.replace('\.png', '') + '.htm');
    });
    $('img').mouseleave(function () {
        $('#description').load('descr/portDefault.htm');
    });
});

但是，我建议为您要参考的所有图像添加一些类，例如

<img class="clickableImage" src="...">

并像这样使用 jQuery 选择它们：

$('.clickableImage').mouseenter(...
于 2013-10-21T17:24:58.707 回答
0

您可以做的一件好事是在您的图像上使用数据属性，例如：

<img class="images"  src="bleh.jpg" data-imagename="image_bleh.jpg" />

在你的javascript里面你做：

$('.images').mounseenter(function(){
   $('#description').load('desc/'+$(this).data('imagename'));
});

让我知道你是否理解。

于 2013-10-21T17:25:56.417 回答
0

你想使用对象吗？因为您说您不想重新编写代码。以下是您将如何制作一个（取自jQuery 创建对象）：

    var box = {}; // my object
var boxes =  []; // my array

$('div.test').each(function (index, value) {
    color = $('p', this).attr('color');
    box = {
        _color: color // being _color a property of `box`
    }
    boxes.push(box);
});

我希望这就是你要找的东西。

于 2013-10-21T17:29:58.657 回答
0

与 matweka 所说的类似，我会为您想要允许悬停的所有图像添加一个类，然后添加一个 this.attr('id') 来选择 p1、p2 等

$(document).ready(function() {
    $('.clickImg').mouseenter(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    });
    $('.clickImg').mouseleave(function() {
         $('#description').load('descr/portDefault.htm');
    });
});

另外，我建议使用 .hover() 而不是 mouseenter 和 mouseleave

前任：

$(document).ready(function() {
    $('.clickImg').hover(function() {
        $('#description').load('descr/' + this.attr('id') + '.htm');
    }, function() {
         $('#description').load('descr/portDefault.htm');
    });
});
于 2013-10-21T17:38:54.430 回答