Javascript 调整窗口大小时更改元素属性（使用WordPress）

我对这个问题很陌生，可能是一个新手问题，答案很简单，但这让我很头疼

我正在制作一个WordPress网站。需要根据窗口宽度更改标题图像。我在网上找到了很多组合，但没有一个有效。不知道我应该使用JS还是Jquery

这就是我得到的：

在我的“header.php”文件中，我有以下内容：

<img src="<?php echo get_template_directory_uri(); ?>" alt="<?php bloginfo('name'); echo " - "; bloginfo('description');?>" id="logo" />

wp_enqueue_script( 'osmpg-logo', get_template_directory_uri() . '/js/logo.js', array(), '20150329', true );

这就是问题所在。这是我的“logo.php”文件：

$（文档）.ready（函数（$）{
$（窗口）。调整大小（函数（）{
var logo=$（“logo”）；
logo.attr（'src'）+='/images/logo.png'；
var windowsize=$（document.width（）；
如果（（windowsize）首先：
$（'logo'）
不是正确的选择器。选择具有特定
id
属性的元素时，应在前面使用
（hash）：
$（'logo'）

接下来，是否接受两个参数：


1属性名称
2属性值

使用
logo.attr（'src'）
可以读取
src
属性的值。

要设置属性，必须在第二个参数中传递新值：

logo.attr('src', 'new_logo.png')`

此外，您应该始终检查这两个条件（窗口大小和当前徽标），以便在当前窗口大小和徽标仍然满足条件时，徽标不会不必要地更新

// cache the element outside rezise handler, so that the DOM isn't searched on every resize:
var logo = $('#logo');

$(window).resize(function() {
    //declare current value of the src attribute:
    var src = logo.attr('src');
    //declare current window size:
    var windowsize = $(document).width();
    //check current window size and src attribute:
    if ((windowsize) >= 800 && src !== '/images/logo.png'){
        //set new src value:
        logo.attr('src', '/images/logo.png');
    //check current window size and src attribute again:
    }else if((windowsize) < 800 && src !== '/images/logo1.png'){
        //set new src value:
        logo.attr('src', '/images/logo1.png');
    }
});

// update logo when page is displayed:
$(window).trigger('resize');

//将元素缓存在rezise处理程序之外，这样就不会在每次调整大小时搜索DOM：
var logo=$（“#logo”）；
$（窗口）。调整大小（函数（）{
//声明src属性的当前值：
var src=logo.attr（'src'）；
//声明当前窗口大小：
var windowsize=$（document.width（）；
//检查当前窗口大小和src属性：
如果（（windowsize）>=800&&src！='/images/logo.png'）{
//设置新的src值：
logo.attr（'src'，'/images/logo.png'）；
//再次检查当前窗口大小和src属性：
}如果（（windowsize）<800&&src！='/images/logo1.png'），则为else{
//设置新的src值：
logo.attr（'src'，'/images/logo1.png'）；
}
});
//显示页面时更新徽标：
$（window.trigger（'resize'）；
请参见

这里有错误的表达式
logo.attr（'src'）=str.replace（“logo”，“logo1”）；
和
logo.attr（'src'）+='/images/logo.png'；
。这些表达式不起任何作用，带有一个参数的方法“attr”是简单的属性getter

对于设置属性，您必须使用两个参数，即属性名称和值。在您的示例中，它是某种类型的
logo.attr（'src'，“logo1”）；
和
logo.attr（'src'，'/images/logo.png'）

和
$（'logo'）；
选择器返回一些
最终代码列表：

jQuery(document).ready(function($){

    var logo = $('#logo');

    $(window).resize(function() {

        var src = logo.attr('src');

        var logo_prefix = src.replace('/images/logo.png', '');
        logo_prefix = logo_prefix.replace('/images/logo1.png', '');

        var logo0 = logo_prefix + '/images/logo.png';
        var logo1 = logo_prefix + '/images/logo1.png';

        var windowsize = $('.wrapper').width();

        if ((windowsize) > 600 && src !== logo0){

            logo.attr('src', logo0);

        }else if((windowsize) <= 600 && src !== logo1){

            logo.attr('src', logo1);
        }
    });

    $(window).trigger('resize');

});

jQuery（文档）.ready（函数（$）{
var logo=$（“#logo”）；
$（窗口）。调整大小（函数（）{
var src=logo.attr（'src'）；
var logo_prefix=src.replace（'/images/logo.png'，''）；
logo_prefix=logo_prefix.replace（'/images/logo1.png'，''）；
var logo0=logo_prefix+'/images/logo.png'；
var logo1=logo_prefix+'/images/logo1.png'；
var windowsize=$（'.wrapper'）.width（）；
如果（（窗口大小）>600&&src！==log0）{
logo.attr（'src'，logo0）；
}else if（（WindowsSize）感谢您的快速回复。我尝试了它，但它不起作用。您确实为我澄清了一些事情。-您在resize之外声明徽标是正确的-我现在了解attr的工作原理-我了解检查src可以避免重新绘制相同的内容，我将不得不进行一些调整，因为scr将有一个前缀（wordpress主题的路径）。当时：“localhost/xxx/wp content/themes/yyy”-我知道我必须将我的函数挂接到某个东西上，并且我缺少“$（window.trigger（'resize'）；”但是，这就是我现在在浏览器中得到的：[link]@Artur Filipiak很友好地指出了我犯的所有错误。但我认为我有一个更大的问题，那就是我函数调用的有效性。可能是Wordpress的问题。也许我需要在脚本排队时使用JQuery依赖项。。。
logo.attr('src', 'new_logo.png')`

// cache the element outside rezise handler, so that the DOM isn't searched on every resize:
var logo = $('#logo');

$(window).resize(function() {
    //declare current value of the src attribute:
    var src = logo.attr('src');
    //declare current window size:
    var windowsize = $(document).width();
    //check current window size and src attribute:
    if ((windowsize) >= 800 && src !== '/images/logo.png'){
        //set new src value:
        logo.attr('src', '/images/logo.png');
    //check current window size and src attribute again:
    }else if((windowsize) < 800 && src !== '/images/logo1.png'){
        //set new src value:
        logo.attr('src', '/images/logo1.png');
    }
});

// update logo when page is displayed:
$(window).trigger('resize');

jQuery(document).ready(function($){

    var logo = $('#logo');

    $(window).resize(function() {

        var src = logo.attr('src');

        var logo_prefix = src.replace('/images/logo.png', '');
        logo_prefix = logo_prefix.replace('/images/logo1.png', '');

        var logo0 = logo_prefix + '/images/logo.png';
        var logo1 = logo_prefix + '/images/logo1.png';

        var windowsize = $('.wrapper').width();

        if ((windowsize) > 600 && src !== logo0){

            logo.attr('src', logo0);

        }else if((windowsize) <= 600 && src !== logo1){

            logo.attr('src', logo1);
        }
    });

    $(window).trigger('resize');

});