0

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

我认为这可能是因为 PHP 但我在没有它的情况下进行了测试（使用确切的 jsfiddle 代码）无济于事。如果有人可以帮助指出为什么那会很棒。

这是 JSfiddle 上的代码

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

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>
4

1 回答 1

3

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

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

或使用较短的版本

(function(){
  // Do something...    
});
于 2013-01-29T03:43:38.083 回答