Question

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

基本思想是在容器div中包含一个包含4个图像的div（div1）。我希望函数将容器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的内容。

任何帮助都会非常棒。

Answer 1

您似乎正在尝试实施旋转木马。要更改图像。你可以使用http://getbootstrap.com/2.3.2/javascript.html#carousel它非常方便，易于使用和定制。

Answer 2

您的代码无法正常工作的原因是因为您的语法有点偏差，并且您没有正确使用.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。如果您需要更多功能，则需要进一步扩展代码。

Answer 3

我会像这样使用.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/

Answer 4

我将它们都放在容器中，而不是将它们移入和移出。然后一次只显示一个。建立在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');
        });
    })
});

用jquery用new替换div

4 个答案: