Question

所以我有一个脚本，当你鼠标输入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');
    });
});

任何提示都会受到赞赏。

Answer 1

您可以为所有图像添加公共类，并按照以下方式执行：

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

Answer 2

我想这取决于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');
    });
});

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

Answer 3

试试这个：

$(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(...

Answer 4

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

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

并在你的javascript中：

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

如果您理解，请告诉我。

Answer 5

你想使用对象吗？因为你说你不想再写代码了。以下是如何制作一个（取自jQuery creating objects）：

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

我希望这就是你在寻找的地方。

Answer 6

类似于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');
    });
});

jQuery脚本中的变量？

6 个答案: