Question

我正在尝试根据屏幕宽度更改图像的文件路径。我已经让它工作到文件路径确实改变但它只影响第一个元素，因为它将所有文件路径更改为同一个。

当我在浏览器中查看我的代码时，图像1和图像2都被src="Images/image.jpg"替换。有人可以帮助我确定我需要做什么/改变，以便它能够独特地影响类名为“swap-image”的每个元素吗？

如同，改变

src="Images/image.jpg" 
src="Images/image1.jpg"

到

src="Images/tablet/image.jpg" 
src="Images/tablet/image1.jpg"

提前谢谢。

<body>
    <img class="swap-image" src="Images/image.jpg" />
    <img class="swap-image" src="Images/image1.jpg" />

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function () {

            var swapImageClass = document.getElementsByClassName("swap-image");
            var i;
            for (i = 0; i < swapImageClass.length; i++) {

                var src = $(swapImageClass).attr('src'); // "Images/image.jpg"
                var tarr = src.split('/');      // ["static","Images","banner","image.jpg"]
                var file = tarr[tarr.length - 1]; // "image.jpg"
                var data = file.split('.')[0];  // "image"

                $(window).on('load resize', function () {
                    $(swapImageClass).each(function () {
                        if ($(window).width() > 1025) {
                            $(swapImageClass).attr('src', 'Images/' + file);
                        }
                        else if ($(window).width() > 481 && $(window).width() < 1024) {
                            $(swapImageClass).attr('src', 'Images/tablet/' + file);
                        }
                        else if ($(window).width() > 0 && $(window).width() < 480) {
                            $(swapImageClass).attr('src', 'Images/mobile/' + file);
                        }
                    });
                });
            };

        });
    </script>
</body>

Answer 1

我们将文件名基于循环中的当前元素并将eventlistener绑定到它。

$(document).ready(function() {
    var swapImageClass = $('.swap-image');

    swapImageClass.each(function(index) {
        var filename = $(this).attr('src').split('/').pop(),
            img = $(this);

        $(window).on('load resize', function() {
            var w = $(window).width();

            if (w > 1025) {
                img.attr('src', 'Images/' + filename);
            } else if (w > 481 && w < 1024) {
                img.attr('src', 'Images/tablet/' + filename);
            } else if (w > 0 && w < 480) {
                img.attr('src', 'Images/mobile/' + filename);
            }
        });
    });
});

Answer 2

当你使用jquery时，我认为你可以简单地使用类名和each()循环。

$(window).on('load resize', function () {
                $(".swap-image").each(function () {
                  var src = $(this).attr('src'); // "Images/image.jpg"
                        var tarr = src.split('/');      // ["static","Images","banner","image.jpg"]
                      var file = tarr[tarr.length - 1]; // "image.jpg"
                    if ($(window).width() > 1025) {
                        $(this).attr('src', 'Images/' + file);
                    }
                    else if ($(window).width() > 481 && $(window).width() < 1024) {
                        $(this).attr('src', 'Images/tablet/' + file);
                    }
                    else if ($(window).width() > 0 && $(window).width() < 480) {
                        $(this).attr('src', 'Images/mobile/' + file);
                    }
                });
            });

在此处https://jsfiddle.net/7619099p/

检查此功能

Answer 3

这里只修改你的代码，这是预期的吗？

;WITH TestData(GRUPPE) AS
(
    SELECT 'row1'
    UNION ALL SELECT 'row2'
    UNION ALL SELECT 'row3'
)
SELECT ROW_NUMBER()OVER(ORDER BY GRUPPE ASC) as '@uuid' ,GRUPPE as TIERKLASSE
FROM TestData
FOR XML PATH('UNB_TIERART')

交换具有相同类名的多个文件路径

3 个答案: