if ( $("#side-2").prop("checked") ) { alert("Этаж 8-9. дом 1-4. правая часть"); $("#flat-image").css("background", "url(<?php bloginfo('template_url')?>/img/flats/floors/8-9-right-bigger.png) center no-repeat"); };

I pull the template on WordPress and I need a simple script, the alert is triggered and the style does not change, why?

Edit: I noticed that when I use <?php bloginfo('template_url')?> , Then the style does not apply at all, and when I write just the path, the style is applied, but since it is Wordpress, it does not work.

  • no element with id = flat-image - Grundy
  • @Grundy Yes, 100% - Bim Bam
  • but no, print $("#flat-image").length In the alert. Well, you should always start with viewing errors in the console - Grundy
  • @Grundy showed "1", there are no errors in the console - Bim Bam
  • 2
    @Ponio, and the server code should not be executed in the browser. If you configure the server so that .js-files are processed as .php-files, then everything will work. It is most likely that the author of the question did not. - neluzhin

3 answers 3

  1. To get started, read the info about "jQuery in noConflict mode" via the link https://codex.wordpress.org/Following function guide/wp_enqueue_script#jQuery_.D0.B2_.D1.80.D0.B5.D0.B6.D0.B8.D0 .BC.D0.B5_noConflict when read, change $ to jQuery

  2. Try using not bloginfo() , but get_template_directory_uri()

  • 2
    Um .. And what does it have to do with it? - Qwertiy ♦
  • In WordPress jQuery loaded in noConflict mode, which lacks $ . In the knosoli queries will work, but not the fact that $ in the console will be equal to jQuery. - Arnial

Manually registered the path, everything worked

  /wp-content/themes/lovelyhouse/img/flats/floors/8-9-right-bigger.png

    In functions.php, insert:

     add_action( 'wp_enqueue_scripts', 'my_scripts' ); function my_scripts() { wp_localize_script( 'jquery', 'my_bloginfo', array( 'template_url' => get_template_directory_uri(), )); }

    And in the JS script like this:

     $("#flat-image").css("background", "url(" + my_bloginfo.template_url + "/img/flats/floors/8-9-right-bigger.png) center no-repeat");