最近我为Wordpress做了一个插件。这是一个响应选项卡,plugin.The短代码运行良好,但是当我在同一个页面中设置多个选项卡时,它就不起作用了。我发现了这个问题,问题是当我使用短代码使用多个选项卡时,tabs增量的id一个接一个地增加,就像我的选项卡id是id="horizantal-tab-1"一样,当我使用另一个缩写它的“成为id="horizantal-tab-2"”时,这个系统是好的,但是我在Jquery和jQuery中的javascript中太弱了,制表符只能用于id="horizantal-tab-1. i不能输入id,也可以在jQuery中使用。
$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);问题在这里,$('#horizontalTab-1'),我按id调用事件,所以它需要一个增量id。
发布于 2015-12-25 21:49:32
可以使用属性选择器选择ids以horizontalTab-开头的元素。
$('[id^="horizontalTab-"]').easyResponsiveTabs({...});https://stackoverflow.com/questions/34466712
复制相似问题