Измените атрибут элемента при изменении размера окна (используя WordPress)

Question

Я очень новичок в этом вопросе и могу быть новичком с таким простым решением, но это дает мне много головной боли.

Я делаю сайт WordPress. Необходимо изменить изображение заголовка в зависимости от ширины окна. Пробовал так много комбинаций, которые я нашел в Интернете, но никто из них не работает. Не знаю, использовать ли JS или JQuery.

Это то, что я получил:

В моем файле "header.php" у меня есть это:

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

В мой файл "functions.php" у меня есть это:

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

В этом проблема. Это мой файл «logo.php»:

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

    $(window).resize(function() { 
     var logo = $('logo'); 
     logo.attr('src') += '/images/logo.png'; 
     var windowsize = $(document).width(); 
     if ((windowsize) <= 800){ 
      logo.attr('src') = str.replace("logo", "logo1"); 
     } 
    } 

}); 

Я знаю, что сценарий выполняет. Я вижу это, когда я использую инструменты отладки в браузере. Это просто не влияет на мой образ. Это всегда результат «get_template_directory_uri()»;

Я хочу добавить '/images/logo.png' для ширины 800+ или '/images/logo1.png' для 799+ ширины после результата get_template_directory_uri(); шаблонный тег.

EDIT: Теперь у меня есть этот код «error free». Теперь мне нужно сделать все, что нужно.

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

    // 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'); 

}); 

EDIT 2: Этот код работает, но только в IE. В Chrome точка прерывания 818px, а не 801px. Есть идеи? Может быть, document.width включает в себя панель прокрутки браузера?

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 = $(document).width(); 

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

      logo.attr('src', logo0); 

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

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

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

}); 

Answer 1

Первый: $('logo') не является надлежащим селектором. Выбор элемента с определенным атрибутом id, вы должны использовать # (хэш) перед: $('#logo')

Далее, jQuery .attr() действительно принимает два аргумента:

• имя атрибута;
• значение атрибута;

С 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'); 

Answer 2

См https://api.jquery.com/attr/

Вот неправильные выражения 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'); селектора возвращает некоторый список <logo ... тегов, вам могут понадобиться изображение 'img' тег или какой-то элемент с идентификатором?

Answer 3

Окончательный код:

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 в Wordpress работает в режиме нет конфликта. more info

Решение моей последней проблемы (CSS и JQuery вычисляет ширину документа по-разному) найдено here.

Решения для большинства других проблем, предоставляемых @Artur Filipiak. Спасибо :)