CODEWITHSUNDEEP
jquerywordpress
heyitsbryan
heyitsbryan

Reputation: 3

Changing class of another element on click

I'm really stuck on this. I'm trying to have the background image of a container change into another after a click event. I have my code working fine in jsfiddle but I can't get it to work on Wordpress.

I think it might be because of the PHP but I've tested without it (using the exact jsfiddle code) to no avail. If anyone could help point out why that would be awesomeeeee.

Here's the code on JSfiddle

And here's the code that I'm using in my website

HTML snippet is in single-work.php:

<ul class="boom_boom_selector">
<?php 
  $images = get_custom_field('work_showcase:to_array', 'get_post'); 
  foreach($images as $img) {
?>
  <li class="boom_selector"><?php echo $img['post_content']; ?></li>
<?php  
  }
?>
</ul>

<div id="work_showcase" class="work_showcase">
</div> <!-- #work_showcase -->

JQuery in header.php:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$('.boom_selector').click(function(){
   $('#work_showcase').attr('class', $(this).text()); 
});
</script>

And the CSS also in header.php:

<?php
    $bg_color = get_custom_field('bg_work');
    $splash = get_custom_field('work_splash');
    ?>

        <?php /* prints .extra, .web, .print */
        $images = get_custom_field('work_showcase:to_array', 'get_post'); 
        foreach($images as $img) {
        ?>
    .<?php echo $img['post_content']; ?> {
        background-image: url("<?php echo $img[guid];?>");
    }
        <?php  
        }
        ?>

    ul.boom_boom_selector li {
        background-image: url(<?php echo $selector ?>); 
    }

    .work_showcase {
    background-image: url(<?php echo $splash ?>);
}


    </style>

Upvotes: 0

Views: 1422

Answers (1)

muthu
muthu

Reputation: 5461

The script needs to run after the DOM is ready, so you need to put your code into document ready like this 

$(document).ready(function(){
   // Do something with the DOM
   $('.boom_selector').click(function(){
     $('#work_showcase').attr('class', $(this).text()); 
   });
});

Or use the shorter version 

(function(){
  // Do something...    
});

Upvotes: 3

Related Questions