1

我设置了一个页面，以便在页面（左中框）的 3x2 块中设置几个公司徽标。

当用户单击徽标时，徽标块旁边的另一个 div（右中框）的内容会发生变化，加载代表 4 个不同数据集的 4 个缩略图图标。

我现在想做的是：

当用户将鼠标悬停在 4 个缩略图图像之一上时，它会将徽标块替换为隐藏 div (中间框-right1) 的内容，其中包含与所选缩略图图像相关的信息。当他们将鼠标从缩略图上移开时，徽标块会重新出现。

现在，单击徽标可以很好地加载第一个 div 的内容，但是将鼠标悬停在第二个 div 中的图像上不会导致徽标块被 mid-box-right1 隐藏 div 中的内容替换。

我通过以下方式设置它：

<div id="HiddenContainerOne" style="display:none;">
    <div id="mid-box-left1"><a href="#" class="testbox1"><-- content here --></a></div>
</div>

<div id="HiddenContainerTwo" style="display:none">
    <div id="mid-box-right1"><-- content here --></a></div>
</div>

<div id="mid-box-right">
    <a href="#" class="logo-change"><-- logo here --></a>
</div>

<div id="mid-box-left">
    <-- content here -->    
</div>

JQuery如下：

$(document).ready(function() {

$(".logo-change").click(function() {
    $("#mid-box-left").fadeOut(500, function() {
        $("#mid-box-left").html($("#mid-box-left1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-left');
        });
    });
    return false;
});

$(".testbox1").mouseover(function() {
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});
});
4

2 回答 2

1

问题是您正在复制 hiddencontainerone 的 html

$('foo').html($('link').html());

这不会复制事件。因此，复制的链接上不存在 mouseover 事件。您应该clone在复制后使用或重新绑定您的事件处理程序。

或者，您可以使用on和监视鼠标悬停事件的更高级别节点。

http://jsfiddle.net/jByc7/

$('body').on('mouseover', '.testbox1', function() {
        console.log('mouseover');
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});​
于 2012-09-28T01:52:48.723 回答
0

用这个包装你的 jquery 代码

检查文档是否已加载所有 html 元素

$(document).ready(function(){

//your jquery code

 });
于 2012-09-28T01:47:33.087 回答