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

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

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

请参考以下图纸：

标签“>

试试这个

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>​​​​​​​​​​​​​​​​​​​​​​​​​

var图像=10；
$（'button'）。在（'click'，function（）上{
var html=''；
对于（var i=0；i试试这个

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>​​​​​​​​​​​​​​​​​​​​​​​​​

var图像=10；
$（'button'）。在（'click'，function（）上{
var html=''；
对于（var i=0；i我将通过捕获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;

if（isset（$\u GET['getImages']）和&TRUE==$\u GET['getImages']）：
//构建一些字符串来传递图像。。
$str=''；
echo$str；
endif；

如果对
.ajax（）
调用中提供的文件名的请求发生，那么它将使用
GET
请求获取图像。我们的条件检查
getImages
的存在和值。我们构建一个包含图像的字符串，并将其传递回
ajax（）的
success:function（data）
调用处理返回的数据。在本例中，数据是我们在
php条件中创建的
$str
。我们只需将框的HTML更改为服务器提供的字符串。
我将通过捕获click函数来完成此任务，然后通过从se请求将一些数据加载到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;

if（isset（$\u GET['getImages']）和&TRUE==$\u GET['getImages']）：
//构建一些字符串来传递图像。。
$str=''；
echo$str；
endif；

如果对
.ajax（）
调用中提供的文件名的请求发生，那么它将使用
GET
请求获取图像。我们的条件检查
getImages
的存在和值。我们构建一个包含图像的字符串，并将其传递回
ajax（）的
success:function（data）
调用处理返回的数据。在本例中，数据是我们在
php conditional
中创建的
$str
。我们只需将框的HTML更改为我们从服务器提供的字符串。
我个人会采取一种不同的更直接的方法。也就是说，如果您只需要一些图像，那么您也可以提前对其进行ch并隐藏，跳过不必要的服务器请求：


代码：

HTML:

JS:

​
 我个人会采取另一种更直接的方法。也就是说，如果您只需要几张图片，那么您最好提前获取并隐藏它们，跳过不必要的服务器请求：


代码：

HTML:

JS:

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


它是使用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）哪个属性将被设置动画，以及动画将花费多少时间

您甚至可以更改框的高度，并添加其他答案中所述的图像：


干杯。
我上传了一个用动画改变背景颜色的例子：


它是使用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）哪个属性将被设置动画，以及动画将花费多少时间

您甚至可以更改框的高度，并添加其他答案中所述的图像：


干杯。
谢谢Sushanth。但有两个问题。我如何在单击时更改背景颜色，然后我将像手动加载图像一样加载图像，而不是依赖php调用它们。我将如何实现这一点？您可以使用add and remove类来完成工作。另外，我的代码中没有使用php。请检查更新的fiddleOK l让我来做这件事。如果我有一个按钮id，我可以使用按钮id，对吗？谢谢Sushanth。但有两个问题。我如何在单击时更改背景颜色，然后我将手动加载图像，而不是依赖php调用它们。我将如何做这件事？你可以使用add和remove类来完成工作。我还有我的代码中没有使用php。检查更新的fiddleOK让我来处理。如果我有一个按钮id，我可以使用按钮id，对吗？谢谢Matanya。但是我如何在单击时更改背景颜色呢？还有一件事是，我很难让javascript部分在我的网页上正常工作。我用什么来确保javascript加载。这是我使用它的方式：code.jquery.com/jquery-1.7.2.min.js“>$（“按钮”）。单击（函数（）{$（“#按钮层”）.hide（）；$（“#图像层”）.show（）；}）；​ 您需要用
$（document）.ready（function（）{//code}）包装它；
，或在加载DOM元素后将代码放在文档末尾。很抱歉，我对这一点不太了解，所以不清楚您的意思以及我将如何处理。可以给我一个如何处理的示例吗？谢谢。我添加了您更新的代码段，但单击它不会更改任何内容。我如何检查错误？谢谢Matanya。但是如何处理我可以在点击时也改变背景颜色吗？还有一件事是我很难做到这一点