jQuery更改文件夹与css更改答案

【问题标题】：jQuery change folder with css changejQuery更改文件夹与css更改
【发布时间】：2014-05-02 20:21:22
【问题描述】：

我正在尝试在 div 更改时更改包含图像的文件夹。我正在使用媒体查询来更改页面加载时的 div。然后我需要 jquery 来检查 div 设置的大小，然后相应地更改图像文件夹。因此，例如，如果我的 div 的最大宽度为 700px，我希望 jquery 将字符串从摄影/移动/更改为摄影/全屏/原始字符串是摄影/全屏/stage.jpg，但我不希望整个字符串改变，只有词全屏、手机或平板电脑。我对 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/"));
  });
  }
});

【问题讨论】：

这条线在做什么 $(this).attr("src", $(this).attr("src")("photography/tablet/")); ，你也可以分享一下你是从哪里得到这个语法的吗？
@gnanz 老实说，我不记得我从哪里得到语法了！我已经搜索了一个解决方案并从这里和那里复制了代码。然后我把它放在一起尝试让它与我有限的 jquery 知识一起工作。我想做的是：fourfront.us/blog/jquery-window-width-and-media-queries
但是！问题是我只想更改实际文件夹，因为该站点是一个摄影站点，并且在每个页面上的每个图像上更改字符串中的一行要容易得多！如果上面的代码可以工作，我认为这将是最好的解决方案？
在 jquery 中尝试“匹配”和“替换”方法。
我想这是我从这里获得代码的地方：stackoverflow.com/questions/16787306/…

标签： jquery css html media-queries

【解决方案1】：

试试这个 - 它会将src 属性的子目录部分替换为新的target_subdir 值。还针对封装、缓存选定元素和代码重用（软件开发中非常重要的事情）进行了修改。

function changeImgSrc(target_subdir) {
    $("img").each(function() {
        var replacementSrc = $(this).attr("src").replace(
            /photography\/(\w*)\//,
            "photography/"+target_subdir+"/"
        );
        $(this).attr("src", replacementSrc);
    });
}

$(document).ready(function() {
    var $surround = $("#surround");
    var $surroundMaxWidth = $surround.css("max-width");
    if ($surroundMaxWidth == "700px") {
        changeImgSrc("fullscreen");
    }

    if ($surroundMaxWidth == "400px") {
        changeImgSrc("mobile");
    }

    if ($surroundMaxWidth == "200px") {
        changeImgSrc("tablet");
    }
});

【讨论】：

解决了！非常感谢您在这里的时间和代码 Derek。

【解决方案2】：

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

作为第一步，你尝试一下

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

并寻找其他方法，例如使用正则表达式，“匹配”来针对您的问题进行此陈述。我将根据进度更新此答案更新问题

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

【讨论】：

非常感谢您的帮助。我同意，我不应该复制/粘贴代码！我会听从你的建议，学习更多关于正则表达式和方法的知识……