JQuery 不替换背景图片

Question

I have a background image on the header section of my blog. I use a conditional php rule to check if the category is a podcast, make x . That work's, but the script to change the background image inside didn't work.

if ( in_category( 14 ) ) : ?>
    <script>
        $('.page-title-section')
           .css({ "background-image": "https://miradasocial.es/wp-content/uploads/2019/11/miradas-transp-largo-x3-300x115.png"});
    </script>
<?php endif; 

I tried with !important on the atribute and with $('.bg-secondary') too, but this didn't work.

HTML Structure

<section class="page-title-section bg-secondary" 
  style="background-image: url('https://miradasocial.es/wp-content/uploads/2019/11/entrevista-terraza.jpg')"> 

You can see live example here .

The returned console error is Uncaught ReferenceError: $ is not defined .

Answer 1

There's no need for Jquery if you're using PHP (laravel or anything) you can set you credential directly with PHP

<?php $pageTitleBgImage = in_category( 14 )
  ? "https://miradasocial.es/wp-content/uploads/2019/11/miradas-transp-largo-x3-300x115.png"
  : "https://miradasocial.es/wp-content/uploads/2019/11/entrevista-terraza.jpg";
?>
<section 
  class="page-title-section bg-secondary" 
  style="background-image: url('<?php echo $pageTitleBgImage; ?>' )"> 

</section>

Answer 2

Please try like this. you may need to add this code in templates or in footer

if ( in_category( 14 ) ) : ?>
<script>
jQuery(document).ready(function($){
 $('.page-title-section').css({ "background-image": "url(https://miradasocial.es/wp-content/uploads/2019/11/miradas-transp-largo-x3-300x115.png)"});
});
</script>
<?php endif; 

Just tested its working.