【问题标题】:conflict between multiple js files in wordpress install?wordpress安装中多个js文件之间的冲突?
【发布时间】:2015-11-17 20:47:11
【问题描述】:

我真的对此一无所知。我为一个朋友在一个 Wordpress 网站上工作,他给了我一个免费的主题供我使用。当然,他想要修改,所以我正在编辑主题。主题使用了多个js包含,其中三个分别是bootstrap.min.jsapp.jsjquery.placeholder.min.js 现在我在首页中加入了一个动态引导轮播,它的文字完美无瑕,除了下一个上一个箭头可以转到下一张或上一张幻灯片! controls 是这样设置的:

        <!-- Controls -->
        <a class="left carousel-control" href="#boost-carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#boost-carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

href 是轮播的 ID(重复检查 100 次,它们匹配)

我试图追查问题并发现撤消 jquery.placeholder.min.js 包含修复它并使其工作。然而,这使得这条线$('input, textarea').placeholder();app.js 中毫无用处,所以我想,好吧,让我们删除它并保存,这又打破了它...... 单击任一箭头时,页面将导航到#boost-carousel,Bootstrap 的 js 应该可以解决此问题。

这种冲突(我猜是吗?)对我来说是全新的,我希望你们能指出我的解决方向(-:

谢谢!

编辑 01 像这样手动触发它们:

$('a[data-slide="prev"]').click(function() {
  $('#boost-carousel').carousel('prev');
});

$('a[data-slide="next"]').click(function() {
  $('#boost-carousel').carousel('next');
});

但是,我仍然想知道这是如何发生的,所以任何反馈都会很棒!

EDIT 02 省略app.js 也可以解决问题,我将在明天或本周晚些时候挖掘该文件以找到更具体的问题。同时,欢迎提出任何建议。 谢谢!

编辑 03 我在app.js 文件中进行了一些挖掘,发现了这段代码:

$(window).load(function () {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash),
                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;

            if ($target) {

                $(this).click(function () {

                    //Hack collapse top navigation after clicking
                    topMenu.parent().attr('style', 'height:0px').removeClass('in'); //Close navigation
                    $('.navbar .btn-navbar').addClass('collapsed');

                    var targetOffset = $target.offset().top - 63;
                    $('html, body').animate({
                        scrollTop: targetOffset
                    }, 800);
                    return false;
                });
            }
        }
    });
});

它对链接进行了一些修改,因此将其注释掉的原因可以解决问题。有人知道它的具体用途吗?

附言为什么我的问题被否决了?没关系,但我想知道为什么,所以我可以介意我的下一个问题。只是投反对票对任何人都没有帮助吗?

【问题讨论】:

  • 是否包含 jQuery? :) 你能添加你可以在控制台中找到的错误吗?
  • 是的,当所有内容都包含在内时,现在会出现控制台错误。当占位符被忽略时,我会得到 $('input, textarea').placeholder(); .placeholder 不是函数错误。如果您需要更多信息,请告诉我
  • app.js 中一定有什么奇怪的地方,抱歉我没有别的想法……

标签: javascript jquery wordpress twitter-bootstrap


【解决方案1】:

您的 app.js 脚本似乎为所有锚链接 (href="#…") 添加了一个点击处理程序,以提供某种“平滑滚动”功能——这似乎干扰了引导轮播功能。

如果您愿意修改此脚本,那么更改它所处理的链接选择以排除用于导航轮播的链接可能是最简单的 - 可能是这样的:

$('a[href*=#]').each(function () {
    // if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname …
    // add "filter" to exclude links with href=#boost-carousel
    if ( […same conditions as above…] && this.hash != '#boost-carousel')

【讨论】:

  • 感谢CBroe,感谢作品!但是,我想知道为什么排除 jquery.placeholder.min.js 也可以,这与此功能无关,对吧?谢谢!
猜你喜欢
  • 1970-01-01
  • 2011-07-03
  • 2016-05-26
  • 1970-01-01
  • 2016-05-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多