javascript - 如何通过我用php制作的jQuery调用增量id

Question

最近我为Wordpress制作了一个插件。这是一个响应式选项卡短代码插件。该短代码运行良好，但是当我在同一页面中创建多个选项卡时，它不起作用。我发现了问题，问题是当我使用简码使用多个选项卡时，选项卡 div 的 id 会一一递增，就像我的选项卡 div 的 id 是 id="horizantal-tab-1"当我使用另一个shortocde时，它变成id="horizantal-tab-2"这个系统没问题，但我在jQuery中的Jquery和javascript方面很弱，仅选项卡为 id="horizantal-tab-1 工作。我也无法在 jQuery 中增加 id。这是我的 php 代码，不是完整代码

$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 代码

(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);

问题就在这里$('#horizo​​ntalTab-1')我通过id调用事件，所以它需要一个增量id。

Answer 1

您可以使用属性选择器来选择 id 以 horizo​​ntalTab- 开头的元素

$('[id^="horizontalTab-"]').easyResponsiveTabs({...});