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

这是我第一次处理这个，所以请纠正我，如果我的这个错误的术语。如何更改点击框中的内容和背景颜色？

我有一个div盒子，它的高度是500，宽度是500，在第一次加载时我会有文字内容。在底部，我会看到一个按钮，上面写着“点击这里”。点击该按钮后，我想更改框中的背景并加载图像。

请参考下图：

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

来源

2012-12-09 ariel

我个人采取了另一种更直接的方法。也就是说，如果你需要的是一些图片，你可能也接他们事先并隐藏他们，跳过不必要的服务器请求：

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

来源

2012-12-09 19:03:16 Matanya

感谢Matanya。但是，我怎么会点击背景颜色变化？ – ariel

还有一件事是我无法使JavaScript部分在我的网页上工作。我用什么来确保JavaScript加载。这就是我如何使用它：

试试这个

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

来源

2012-12-09 18:47:35

谢谢Sushanth。但是有两个问题。如何在点击时更改背景颜色，然后我将像那样手动加载图像，而不是依靠php来调用它们。我将如何完成这项工作？ – ariel

你可以使用添加和删除类来完成工作。另外我还没有在任何地方使用php代码。检查更新的小提琴 –

好吧，让我工作。如果我有一个按钮ID，我可以使用按钮＃编号吧？ – ariel

我会通过捕捉点击功能，然后加载一些完成这个任务数据通过从服务器请求数据到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); 
     } 
    }); 
});

然后在服务器端，我们可以捕获获取请求并返回一串图片;这个例子是在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的存在和价值。我们在其中创建一个带有图像的字符串，并将其传回。我们的ajax()调用的success:function(data)处理返回的数据。在这个例子中。数据是我们在php conditional中所做的$str。我们只是将该框的HTML更改为我们从服务器提供的字符串。

来源

2012-12-09 18:47:50 Ohgodwhy

我上传一个例子与动画改变背景颜色：

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/

干杯。

来源

2012-12-09 19:06:42

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

回答

相关问题