1

jquery サイクルを使用して、Wordpress テンプレートでスライドショーを作成しています。「ページャー」は、スライドショーをオーバーレイするボタンを作成し、ロールオーバーはスライドを進めます。私が遭遇している問題は、ロールオーバーを同じままにする必要があることですが、ボタンをクリックするとユーザーが特定のページに移動するように href を設定する必要もあります。

  1. href のスライドショーから変数 $target を取得する必要があります。
  2. ボタンをクリック可能にするには、onclick が必要です。

上で述べたように、私はこれに不慣れであり、これがひどいコードである/実行できない/私がバカである可能性は十分にあります。

私のjquery：

        <script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.min.js" type="text/javascript"></script>
    <script type="text/javascript">
            jQuery(document).ready(function($) {
            if ( $('.slides > .slide').size() > 1 ) {
                $('.slides')
                    .cycle({
                        timeout: 6000,
                        speed: 1000,
                        pager: '#slides #mainNav',
                        pauseOnPagerHover: 200,
                        pagerEvent: 'mouseover',
                        pause: true,
                        pagerAnchorBuilder: function(idx, slide) {
                            var slideImage = $(slide).find('img');
                            var slideTitle = slideImage.attr('title');
                            var slideURL = "<?php echo $target; ?>";
                            return '<li><a href="/' + slideTitle + '">' + slideTitle + /* '<br /><span class="description">' + slideDescr + '</span>*/'</a></li>';
                        }
                    });

            }
        });
        </script>

そして私のWordpressスライドショー：

        <?php if ( is_front_page() && $slides = get_posts(array('numberposts' => -1, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'slide')) ) : ?>
<div id="mainImg">
        <div id="slides">
            <div class="slides">
                <?php foreach ($slides as $slide) : ?>
                    <?php $title = $slide->post_title; ?>
                    <?php $content = wpautop($slide->post_content); ?>
                    <?php $description = get_post_meta($slide->ID, 'description', true); ?>
                    <?php $thumb = get_the_post_thumbnail($slide->ID, 'slide', array('title' => $title, 'alt' => $description)); ?>
                    <?php $url = get_post_meta($slide->ID, '_slide_url', true); ?>
                    <?php $target = (get_post_meta($slide->ID, '_slide_url_blank', true)) ? 'target="_blank"' : ''; ?>
                    <div class="slide">
                        <?php if ($url) : ?>
                            <a href="<?php echo $url; ?>" <?php echo $target; ?>><?php echo $thumb; ?></a>
                        <?php else: ?>
                            <?php echo $thumb; ?>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
<div id="mainNav"></div>        
        </div>
</div><!--end mainImg-->
    <?php endif; ?>

よろしくお願いいたします。

4

1 に答える 1

0

あなたが持っている場所：

var slideURL = "<?php echo $target; ?>"

それを次のように置き換えます。

var slideURL = $(slide).find('a').attr('target');

上記では、スライド オブジェクトを取得し、スライド内の「a」タグを見つけて、「a」タグの「ターゲット」属性を取得しています。slideURL次に、この値が変数 ( または のいずれ'_blank'か)に割り当てられますundefined。jQuery を使用して HTML 要素および/またはその属性を取得する方法の詳細については、jQuery のTraversingおよびAttributesメソッドをよく理解する必要があります。

とにかく、Javascript コードを PHP や HTML コードと混ぜてはいけません。「邪魔にならない JavaScript」を読んでください。

于 2012-12-17T00:46:05.700 に答える