Question

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

它对链接进行了一些修改，因此对此进行评论的原因解决了这个问题。有人知道具体是什么吗？

P.S。为什么我的问题被贬低了？没关系，但我想知道为什么所以我可以把它放在下一个问题上。只是downvoting对任何人都没有帮助吗？

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

wordpress install中多个js文件之间的冲突？

1 个答案: