1

我需要一些简单的帮助！这是一个改变 div 内容的 jquery 函数。

基本思想是有一个容器 div，里面有一个 div (div1)，其中包含 4 个图像。我希望该函数将容器 div 内的 div 内容（带有淡入淡出）从 div1 更改为 div 2。

Div 1 和 2 是相同的；它只是被替换的图像。

这是html：

<html>
    <head>
        <title>xx</title>
        <link rel="stylesheet" href="stylesheet.css">
        <script src="jquery.js"></script>
    <head>
    <body>
        <input id="doit" type="button" value="clickme">
        <div id="containerdiv">
            <div id="div1">
                <img class="SW">    
                <img src="Img/SW_A.jpg" height=125px width 125px >
                <img src="Img/SW_B.jpg" height=125px width 125px >
                <img src="Img/SW_C.jpg" height=125px width 125px >
                <img src="Img/SW_D.jpg" height=125px width 125px >
            </div> 
        </div>
        <div id="div2">
            <img class="SW" >  
            <img src="Img/SW_E.jpg" height=125px width 125px >
            <img src="Img/SW_F.jpg" height=125px width 125px >
            <img src="Img/SW_G.jpg" height=125px width 125px >
            <img src="Img/SW_H.jpg" height=125px width 125px >
        </div> 
    <body>
<html>

和脚本：

$('#doit').click(function(){
    $('#div1').fadeOut('slow', function() {
        $('#div1').html$('#div2')
        $('#div1').fadeIn('slow');
    });    
});

当我将简单文本作为 div2 的内容时，该功能确实有效：

$('#doit').click(function(){
    $('#div1').fadeOut('slow', function() {
        $('#div1').html('my new content')
         $('#div1').fadeIn('slow');
    });    
});

但我希望将 div 替换为新的类似 div，而不是文本！我在 jquery 上搜索了很多这个简单的代码，但似乎找不到我要找的东西。

另外，在从函数加载之前，我需要找到一种方法来从页面中隐藏 div2 的内容。

任何帮助都会非常棒。

4

4 回答 4

1

您似乎正在尝试实现轮播。改变图像。您可以使用http://getbootstrap.com/2.3.2/javascript.html#carousel它非常方便且易于使用和自定义。

于 2013-08-14T22:21:38.450 回答
0

您的代码无法正常工作的原因是您的语法有点不对劲，而且您没有完全.html()正确地使用该方法。我还使用您的按钮来隐藏容器，然后让它重新出现，其中包含新内容。见我的jsfiddle。

HTML

<input id="doit" type="button" value="clickme">
<div id="containerdiv">


<div id="div1">

<img class="SW">    
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px >
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px >
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px >
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSJ6LGVbd2hRo9GEemMi-EWK6e8uhifbtdanY1KotPsSr_Sut0pVw" height=125px width 125px >

</div> 

</div>

<div id="div2">

<img class="SW" >  
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px >
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px >
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px >
<img src="http://factoryjoe.com/projects/wordpress-icon/files/wordpress-icon-128.png" height=125px width 125px >

</div>

CSS

#div1{ }
#div2{ display: none; }

jQuery

    $(function(){
    $('#doit').click(function(){
        $('#containerdiv').fadeOut('slow', function() {
            $('#containerdiv').html($('#div2').html());
            $('#containerdiv').fadeIn('slow');
        });
    })
});

当然，这是如果您只想从 切换div1到div2. 如果您想要更多功能，则需要进一步扩展代码。

于 2013-08-14T22:28:49.993 回答
0

我会这样使用.replaceWith()。但是，正如下面另一张海报所述，您可能正在尝试实现轮播功能。如果这是真的，那么我会说不要费心重新发明轮子！

您正在尝试做的简单版本：

HTML：

<input id="doit" type="button" value="clickme">
<div id="div1"> 
    <img src="http://placehold.it/125x125"/>
    <img src="http://placehold.it/125x125"/>
    <img src="http://placehold.it/125x125"/>
    <img src="http://placehold.it/125x125"/>

</div> 

<div id="div2" class="hidden">
    <img src="http://placehold.it/125x125"/>
    <img src="http://placehold.it/125x125"/>
    <img src="http://placehold.it/125x125"/>

    </div>

Javascript：

$('#doit').click(function(){
    $('#div1').fadeOut('slow', function() {
    $('#div1').replaceWith($('#div2'));
     $('#div2').removeClass('hidden');
    $('#div1').fadeIn('slow');
});    
})

示例 CSS：

.hidden {
    display:none;
    background-color:red;
}

第一个 div 有 4 张图片，第二个 div 点击有 3 张图片（将它们分开，因为我没有任何好的示例图片可供使用）

http://jsfiddle.net/m9qAY/1/

于 2013-08-14T22:30:06.897 回答
0

我会把它们都放在容器里，而不是把它们移进移出。然后一次只显示一个。基于 Fillip Peyton 的小提琴：http: //jsfiddle.net/kFQ4q/1/

$(function () {
    var vis = 1;
    $('#doit').click(function () {
        $('#containerdiv').fadeOut('slow', function () {
            $('#div'+vis).hide();
            vis = vis === 1 ? 2 : 1;
            $('#div'+vis).show();
            $('#containerdiv').fadeIn('slow');
        });
    })
});
于 2013-08-14T22:52:57.367 回答