2012-12-17 32 views
1

我正在使用jquery循环在我的Wordpress模板中创建幻灯片。 “传呼机”正在创建覆盖幻灯片放映的按钮,并且翻转提升幻灯片。我遇到的麻烦是我需要翻转保持不变,但我还需要设置一个href,以便点击按钮将用户带到特定的页面。JQuery + Wordpress PHP变量

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

预先感谢您的帮助。

+0

是否有Jquery本身链接? like:'' – bobthyasian

+0

当你使用''按钮时, mouseover''寻呼机事件?? – charlietfl

回答

0

如果您有:

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

将其替换为:

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

你在做什么上面得到幻灯片对象,在幻灯片找到的一个标签,然后让'a'标签的“目标”属性。然后将该值分配给slideURL变量(其将为'_blank'undefined)。有关如何使用jQuery获取HTML元素和/或其属性的更多信息,您应该更熟悉jQuery的TraversingAttributes方法。

无论如何,您都不应该将Javascript代码与PHP或甚至HTML代码混合在一起。阅读更多关于“Unobtrusive JavaScript”的内容。