如何更改點擊框中的內容和背景顏色？

這是我第一次處理這個，所以請糾正我，如果我的這個錯誤的術語。如何更改點擊框中的內容和背景顏色？

我有一個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

相關問題

如何更改點擊框中的內容和背景顏色？

回答

相關問題