Question

我真的坚持这个。我试图在点击事件之后将容器的背景图像更改为另一个。我的代码在jsfiddle中运行正常，但我无法在Wordpress上运行。

我认为这可能是因为PHP，但我已经测试过没有它（使用精确的jsfiddle代码）无济于事。如果有人可以帮助指出为什么那将是awesomeeeee。

这是我在我的网站上使用的代码

HTML片段在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 -->

header.php中的JQuery：

<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 ?>);
}


    </style>

Answer 1

脚本需要在DOM准备好后运行，因此您需要将代码放入document就绪，就像这样

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

或使用较短版本

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

单击时更改另一个元素的类

1 个答案: