wordpress安装中多个js文件之间发生冲突？

Question

我真的对此一无所知。 我为一个朋友在 Wordpress 网站上工作，他给了我一个免费的主题供我使用。 当然，他想要修改，所以我正在编辑主题。 主题使用了多个 js 包含，其中三个是bootstrap.min.js 、 app.js和jquery.placeholder.min.js现在我在首页包含了一个动态引导轮播，除了 next-prev 之外，它的文字完美无缺箭头转到下一张或上一张幻灯片！ 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');
});

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

编辑 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;
                });
            }
        }
    });
});

它对链接进行了一些修改，因此注释掉它可以解决问题。 有没有人知道它的具体用途是什么？

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

Answer 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')