使用jQuery更改img attr

-1

而不是使用窗口寬度來更改我的img標記我想使用通過媒體查詢更改的另一個元素高度。例如：該頁面被加載到全尺寸（而不是移動或平板電腦）監視器上。當窗口縮小並達到800px的折點時，css表單會更改，並且名爲.content的div標籤（在我的代碼中）的高度更改爲267px。現在我想讓jQuery在.content < 287時更改圖像標記的.attr，然後再在下一個中斷點（< 135）上更改。使用jQuery更改img attr

我盡我所能寫代碼但沒有運氣。我希望這是有道理的，並且很容易解決。我對jQuery非常陌生，但我很確定。預先感謝您的任何幫助。這裏是一個小提琴代碼：http://jsfiddle.net/Margate/ze2GR/

 <html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Responsive Test</title> 
    <script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
     var n = $(".content").height(); 
     if(n < 268){ 
     $("#pictureOne").prop("src","medium.jpg").width(400).height(267); 

     }else if (n < 135){ 
     $("#pictureOne").prop("src","small.jpg").width(200).height(134); 
     } 
     }); 
    </script> 

    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:5000px)" href="large.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:601px) and (max-width:800px)" href="medium.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:10px) and (max-width:600px)" href="small.css" /> 
    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 
</head> 

<body> 

<div class="content"> 
    <img id="pictureOne" src="large.jpg" width="700" height="467"> 
</div> 

</body> 
</html>

這裏有外部CSS表：）

 Small 
.content {position: relative; margin: 0px auto; width: 200px; height: 134px; border: 1px solid black;} 

Medium 
.content {position: relative; margin: 0px auto; width: 400px; height: 267px; border: 1px solid black;} 

Large 
.content {position: relative; margin: 0px auto; width: 700px; height: 467px; border: 1px solid black;}

來源

2014-02-28 Margate

嘗試支持方法幷包含在加載函數中 –

試試這個解決方案。

CSS

/* Large Media Query */ 
.content {position: relative; margin: 0px auto; width: 700px; height: 467px; border: 1px solid black;} 

@media only screen and (max-width: 500px) { 
    /* Small Media Query */ 
    .content {height: 267px;} 
} 

@media only screen and (max-width: 300px) { 
    /* Small Media Query */ 
    .content {height: 134px;} 
}

HTML

<div class="content"> 
    <img id="pictureOne" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/check_alt-48.png" > 
</div>

jQuery的

function setLayout(){ 

     var n = $(".content").height(), 
      url = 'https://cdn3.iconfinder.com/data/icons/iconic-1/32/'; 
    switch(n){ 
     case 134: 
      $("#pictureOne").attr("src", url+"check_alt-24.png"); 
      break; 
     case 267: 
      $("#pictureOne").attr("src", url+"check_alt-32.png"); 
      break; 
     default: 
      $("#pictureOne").attr("src", url+"check_alt-48.png"); 
    } 

}; 

$(document).on('resize ready', function(){ setLayout() }); 
$(window).on('resize', function(){ setLayout() });

Fiddle Demo

來源

2014-02-28 08:44:27

非常感謝Rakesh爲你的時間和幫助。 – Margate

的jQuery .height（是一種方法，你需要調用它來獲得高度。

所以

var n = $(".content").height();

來源

2014-02-28 07:10:51

jQuery的width()和height()的功能，並可以這樣使用：

$(document).ready(function(){ 
     var n = $(".content").height(); 
     if (n < 268){ 
      $("#pictureOne").prop("src","medium.jpg").width(400).height(267); 

     }else if (n < 135) { 
      $("#pictureOne").prop("src","medium.jpg").width(200).height(134) 
     } 
});

注意，你還缺少括號中的條件，你應該使用prop()改變屬性，如src。

來源

2014-02-28 07:11:13 adeneo

感謝您的幫助和代碼。我更新了我的代碼，但仍然無法讓我的圖像正確更改。 – Margate

使用jQuery更改img attr

回答

相關問題