jQuery脚本中的变量？答案

【问题标题】：Variable in jQuery script?jQuery脚本中的变量？
【发布时间】：2013-10-30 07:37:46
【问题描述】：

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

任何提示将不胜感激。

【问题讨论】：

$("img") 或使用类 $(".mouseoverclass").mouseenter...

标签： jquery html css load

【解决方案1】：

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

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

【讨论】：

【解决方案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');
    });
});

编辑：更新以反映所有 cmets。

【讨论】：

只要您使用有效的自定义 [data-*] 属性，自定义属性就可以了。而不是[targetPage]（无效），您应该使用[data-target-page]，您可以使用$(..).data('targetPage'); 访问它。
已更新以反映您的评论。
我喜欢你的回答，但我还是要复制/粘贴很多次，因为会有很多像 #p1 这样的 div 会触发脚本，所以有什么解决方法吗?因为我不确定是否可以将自定义属性用于脚本触发器。 @edit 哦，我想我明白了，我可以在图像上使用 class 而不是 id。
太好了，很高兴我能帮上忙

【解决方案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(...

【讨论】：

【解决方案4】：

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

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

在你的 javascript 中你可以这样做：

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

如果你明白了，请告诉我。

【讨论】：

【解决方案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);
});

我希望这就是您想要的。

【讨论】：

【解决方案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');
    });
});

【讨论】：