Question

我正在尝试保持两个jquery UI标签同步。您可以在首页上看到标签here。基本上，当点击休斯顿时，应该点击其他休斯顿选项卡，对于奥斯汀来说也是如此。

这是我做的（我现在已经删除了代码，因为它非常慢）：

jQuery(document).ready(function(){
    jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston_locations']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin-3']", ".wp-tabs").click();
    });

    jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#houston']", ".wp-tabs").click();
    });

    jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){
        jQuery("a[href='#austin']", ".wp-tabs").click();
    });
});

我上面的代码有效;但它很慢，并且在控制台中出现“太多递归”的错误。

其他人可以提供更好的解决方案吗？

Answer 1

我希望你可以试试

jQuery(document).ready(function(){
jQuery("a[href='#houston']", ".wp-tabs").on("click", function(){
    $("a[href='#houston_locations']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#austin']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#austin-3']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#houston_locations']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#houston']", ".wp-tabs").trigger("click");
});

jQuery("a[href='#austin-3']", ".wp-tabs").on("click", function(){
    jQuery("a[href='#austin']", ".wp-tabs").trigger("click");
});

}）;

Answer 2

每当您单击其中一个休止符选项卡时，它将触发第二个休止符选项卡的单击事件，该事件将触发第一个休止符选项卡的单击事件，即使是第二个休止符选项卡也会触发单击，依此类推。这是你的错误控制台所指的“过多的递归” - 因为这将继续发生，直到浏览器确定它已经足够（这就是为什么它运行缓慢）。

要解决这个问题，我会将每个标签的主要点击方法分成不同的函数，并在每个点击事件中调用这两个函数。

希望有所帮助

保持两个jquery UI选项卡同步

2 个答案: