javascript - 如何在单击时更改框的内容和背景颜色？

Question

这是我第一次解决这个问题，所以如果我的术语有误，请纠正我。

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

请参考下图：

Answer 1

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

工作小提琴

代码：

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");
    })
  });

​</p>

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);

});​

​&lt;div class="a">
   I am the initial div...
</div>

​&lt;button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​

检查小提琴

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/

干杯。