Изменение класса другого элемента по щелчку

Я действительно застреваю на этом. Я пытаюсь иметь фоновое изображение контейнерного изменения в другого после события щелчка. У меня есть свой код, хорошо работающий в jsfiddle, но я не могу заставить его работать над Wordpress.

Я думаю, что это могло бы быть из-за PHP, но я проверил без него (использование точного кода jsfiddle) напрасно. Если бы кто-либо мог бы выручить пункт, почему это было бы awesomeeeee.

Вот код по JSfiddle

И вот код, который я использую на своем веб-сайте

Отрывок HTML находится на сингле-work.php:

    <?php $images = get_custom_field('work_showcase:to_array', 'get_post'); foreach($images as $img) { ?>
  • <?php echo $img['post_content']; ?>
  • <?php } ?>
<div id="work_showcase" class="work_showcase">
</div> <!-- #work_showcase -->

JQuery в 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>

И CSS также в 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 ?>);
}


    
0
nl ja de
Управляйте им после того, как DOM будет готов. Проверьте @muthu' s ответ. И it' s всегда лучше, чтобы отправить пример кода вместо кода вы используете для вас реальный сайт.
добавлено автор Deepak Kamat, источник
Оказывается, что я просто забыл добавлять документ готовая функция. I' m такой новичок: (. Спасибо, хотя парни! И @DeepakKamat I' ll имеют это в виду в следующий раз.
добавлено автор heyitsbryan, источник

1 ответы

Сценарий должен бежать за DOM, готово, таким образом, необходимо поместить код в документ готовый как это

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

Или используйте более короткую версию

(function(){
 //Do something...    
});
3
добавлено
Gah. I' m настолько глупый. Это было им, я потратил как два часа, пытаясь выяснить проблему. Большое спасибо!
добавлено автор heyitsbryan, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

WordPress – русскоговорящее сообщество
WordPress – русскоговорящее сообщество
768 участник(ов)

Группа пользователей популярнейшей CMS WordPress. Запрещено: мат и ругань реклама, спам (в т.ч. каналами) религия, политика, наркотики приглашение ботов без согласования #nowarez

WordPress for developers
WordPress for developers
761 участник(ов)

Группа для разработчиков wordpress Запрещено - мат - оскорбления - флуд - реклама ip телефония https://goo.gl/wBaqci Другие чаты Битрикс https://t.me/bitrixfordevelopers Битрикс работа https://t.me/bitrix_work