使用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

回答

相关问题