0

私は本当にこれにこだわっています。クリック イベントの後にコンテナーの背景イメージを別のイメージに変更しようとしています。コードは jsfiddle で正常に動作していますが、Wordpress では動作しません。

PHPが原因である可能性があると思いますが、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>

また、header.php にも CSS があります。

<?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 に答える