带有css更改的jQuery更改文件夹_Jquery_Css_Html_Media Queries

带有css更改的jQuery更改文件夹

jquery css html

带有css更改的jQuery更改文件夹,jquery,css,html,media-queries,Jquery,Css,Html,Media Queries,当div更改时，我试图更改包含图像的文件夹。我正在使用媒体查询更改页面加载上的div。然后我需要jquery检查div的大小，然后相应地更改图像文件夹。例如，如果我的div的最大宽度是700px，我希望jquery将字符串从photography/mobile/更改为photography/fullscreen/原始字符串是photography/fullscreen/stage.jpg，但我不希望整个字符串更改，只希望单词fullscreen、mobile或table。我可以使用css，但是我

当div更改时，我试图更改包含图像的文件夹。我正在使用媒体查询更改页面加载上的div。然后我需要jquery检查div的大小，然后相应地更改图像文件夹。例如，如果我的div的最大宽度是700px，我希望jquery将字符串从photography/mobile/更改为photography/fullscreen/原始字符串是photography/fullscreen/stage.jpg，但我不希望整个字符串更改，只希望单词fullscreen、mobile或table。我可以使用css，但是我的jquery很糟糕，因为我现在正在学习

以下是代码，但jquery不起作用，因为媒体查询时图像不会更改：

    <!DOCTYPE html>
<html>

<head>
  <title>Change Image!</title>

  <style type="text/css">
    #surround{position: relative; margin: 0px auto; width: 100%; max-width: 700px; height: 467px; border: 1px solid black;}
    @media screen and (max-width:800px){ #surround{max-width: 400px; height: 262px; border: 1px solid blue;} }
    @media screen and (max-width: 500px){ #surround{max-width: 200px; height: 133px; border: 1px solid red;} }
  </style>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/init.js"></script>
</head>

<body>

<div id="surround">
  <image src="photography/fullscreen/stage.jpg" class="picture" />
</div>

</body>
</html>



$(document).ready(function(){
  if($("#surround").css("max-width") == "700px"){
  $("img").each(function(){
  $(this).attr("src", $(this).attr("src")("photography/fullscreen/"));
  });
  }

  if($("#surround").css("max-width") == "400px"){
  $("img").each(function(){
  $(this).attr("src", $(this).attr("src")("photography/tablet/"));
  });
  }

  if($("#surround").css("max-width") == "200px"){
  $("img").each(function(){
  $(this).attr("src", $(this).attr("src")("photography/mobile/"));
  });
  }
});


改变形象！
#环绕{位置：相对；边距：0px自动；宽度：100%；最大宽度：700px；高度：467px；边框：1px纯黑；}
@媒体屏幕和（最大宽度：800px）{环绕{最大宽度：400px；高度：262px；边框：1px纯蓝色；}
@媒体屏幕和（最大宽度：500px）{环绕{最大宽度：200px；高度：133px；边框：1px纯红；}
$（文档）.ready（函数（）{
如果（$（“#环绕”）.css（“最大宽度”）=“700px”）{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）（“摄影/全屏/”））；
});
}
如果（$（“#环绕”）.css（“最大宽度”）=“400px”）{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）（“摄影/平板电脑/”）；
});
}
如果（$（“#环绕”）.css（“最大宽度”）=“200px”）{
$（“img”）。每个（函数（）{
$（this.attr（“src”），$（this.attr（“src”）（“摄影/移动/”））；
});
}
});

尝试此操作-它将用新的

目标子目录

值替换

src

属性的子目录部分。还针对封装、缓存选定元素和代码重用（软件开发中非常重要的事情）进行了修改

这不是一个完整的解决方案，所以您是jquery新手，我不希望您使用复制粘贴

作为第一步，你要像

var src = $(this).attr("src").replace("photography/fullscreen/", "photography/tablet/");
  $(this).attr("src", src);

并寻找其他方法，比如使用正则表达式“match”来为您的问题做出这样的陈述。我会根据进度更新这个问题的答案

更新：由于Derek提供了完整的代码，您现在可以获取该代码

这行代码在做什么呢$（this.attr（$（src），$（this.attr（$）摄影/平板电脑/），你能分享一下你从哪里得到的语法吗？@gnanz说实话，我记不起我从哪里得到的语法了！我在谷歌上搜索了一个解决方案，并从这里和那里复制了代码。然后我把它放在一起，尝试用我有限的jquery知识让它工作。我想做的是：但是！问题是我只想更改实际文件夹，因为该站点是一个摄影站点，在每个页面上的每个图像上更改字符串中的一行要容易得多！如果上面的代码可以工作，我认为这将是最好的解决方案？请尝试jquery中的“match”和“replace”方法。我想这就是我获得代码的原因：非常感谢您的帮助。我同意，我不应该复制/粘贴代码！我会听从你的建议，学习更多关于正则表达式和方法的知识…解决了！非常感谢您的时间和代码在这里德里克。

var src = $(this).attr("src").replace("photography/fullscreen/", "photography/tablet/");
  $(this).attr("src", src);