Question

这是我第一次处理这个问题所以如果我的术语出错，请纠正我。

我有一个高度为500，宽度为500的div框，在它首次加载时我会有文本内容。在底部，我将有一个按钮，上面写着“点击这里”。单击该按钮时，我想更改框中的背景并加载图像。

请参考下图：

So when the "click here" button is clicked, in the same box I just want to change the background and make the text that was there removed and load images using <img> tags

Answer 1

我个人采取不同的更直接的方法。也就是说，如果您需要的只是一些图像，您可以提前获取它们并隐藏它们，跳过不必要的服务器请求：

Working fiddle

CODE：

HTML：

<div id="container">
    <div id="button_layer">
        <p>Some Text</p>
        <button>Click Me</button>
    </div>
    <div id="images_layer">
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
         <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
    </div>
   </div>

CSS：

#container {
width:500px;
height:500px;
background:grey;
}
#images_layer {
display:none;
}

JS：

 $(document).ready(function(){
    $("button").click(function(){
         $("#button_layer").hide();
        $("#images_layer").show();
        $("#container").css("background","yellow");
    })
  });

Answer 2

试试这个

var images = 10;

$('button').on('click' , function(){
    var html = '';
    for(var i =0;i<images ; i++){
      html += '<img src="images/image-'+ images + '"></img>';   
    }

    $('.a').removeClass('a').addClass('b').html(html);

});

<div class="a">
   I am the initial div...
</div>

<button>Click Me</button>

<强> Check Fiddle

Answer 3

我将通过捕获click函数完成此任务，然后通过从服务器请求将一些数据加载到div中。

$('button').on('click', function(){
    $.ajax({
        type: 'GET', //default anyway
        url: '/path/to/my/controller.ext',
        data: {'getImages' : true},
        success: function(data){
             $('.box').html(data); 
        }
    });
});

然后在服务器端，我们可以捕获get请求并返回一串图像;这个例子是在PHP中。

if(isset($_GET['getImages']) && TRUE === $_GET['getImages']):
    //build some string to pass images..
    $str = '<img src="path/to/my/first_img.ext"/><img src="path/to/my/second_img.ext"/><img src="path/to/my/third_img.ext"/><img src="path/to/my/fourth_img.ext"/><img src="path/to/my/fifth_img.ext"/>';
    echo $str;
endif;

如果我们.ajax()调用中提供的文件名请求发生，那么它将使用GET请求来抓取图片。我们对getImages的存在和价值进行了条件检查。我们在其中构建一个包含图像的字符串，并将其传回。 success:function(data)调用的ajax()处理返回的数据。在这个例子中。数据是我们在$str中创建的php conditional。我们只需将框的HTML更改为我们从服务器提供的字符串。

Answer 4

我上传了一个用动画更改背景颜色的示例：

http://jsfiddle.net/TBvcW/1/

它是使用CSS3制作的，但不支持它的浏览器会在没有动画的情况下改变颜色。颜色动画的关键代码是这些CSS属性：

-webkit-transition: background-color 0.5s, color 0.5s;
-mox-transition: background-color 0.5s, color 0.5s;
-o-transition: background-color 0.5s, color 0.5s;
transition: background-color 0.5s, color 0.5s;

在哪里，我们决定在更改（通过CSS）时动画的属性，以及动画将花费多少时间。

您甚至可以更改框的高度并按照其他答案中的说明添加图像：

http://jsfiddle.net/TBvcW/2/

干杯。

如何更改单击框中的内容和背景颜色？

4 个答案: