首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何用我用php创建的jQuery调用incri入id

如何用我用php创建的jQuery调用incri入id
EN

Stack Overflow用户
提问于 2015-12-25 21:46:47
回答 1查看 44关注 0票数 1

最近我为Wordpress做了一个插件。这是一个响应选项卡,plugin.The短代码运行良好,但是当我在同一个页面中设置多个选项卡时,它就不起作用了。我发现了这个问题,问题是当我使用短代码使用多个选项卡时,tabs增量的id一个接一个地增加,就像我的选项卡id是id="horizantal-tab-1"一样,当我使用另一个缩写它的“成为id="horizantal-tab-2"”时,这个系统是好的,但是我在Jquery和jQuery中的javascript中太弱了,制表符只能用于id="horizantal-tab-1. i不能输入id,也可以在jQuery中使用。

代码语言:javascript
复制
$wrapInc = 1;
function gs_tabs_shortcode($atts, $content= null){
    global $wrapInc;
    $GLOBALS['tab_count'] = 0;


    do_shortcode( $content );


    if ( is_array( $GLOBALS['tabs'] ) ) {


        foreach ($GLOBALS['tabs'] as $tab ) {
            $tabs[]= '<li> <i class="fa fa-'.$tab['icon'].' fa-lg "></i>  '.$tab['title'].'  </li>';
            $tabcontent[]= '<div><p> '.$tab['content'].' </p></div>';
        }

        $return = '<div id="horizontalTab-'.$wrapInc.'">';
        $return .= '<ul class="resp-tabs-list">'.implode( "\n", $tabs ).'</ul>';

        $return .= '<div class="resp-tabs-container">'.implode("\n", $tabcontent).'</div>';
        $return .= '</div>';
        $wrapInc++;

    }
    return $return;

}
add_shortcode('gs_tabs', 'gs_tabs_shortcode'); 

这是我想要修复的jQuery代码

代码语言:javascript
复制
(function ($) {


$(document).ready(function () {
      $('#horizontalTab-1').easyResponsiveTabs({
      type: 'default', //Types: default, vertical, accordion           
      width: 'auto', //auto or any width like 600px
      fit: true,   // 100% fit in a container
      closed: 'accordion', // Start closed if in accordion view
      activate: function(event) { // Callback function if tab is switched
      var $tab = $(this);
      var $info = $('#tabInfo');
      var $name = $('span', $info);
      $name.text($tab.text());
      $info.show();
      }
      });


})(jQuery);

问题在这里,$('#horizontalTab-1'),我按id调用事件,所以它需要一个增量id。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-25 21:49:32

可以使用属性选择器选择ids以horizontalTab-开头的元素。

代码语言:javascript
复制
$('[id^="horizontalTab-"]').easyResponsiveTabs({...});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34466712

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档