文章/答案/技术大牛

发布

社区首页 >问答首页 >带有刀锋的Laravel 5...使用路由时，我不能在使用辅助函数jQuery ()时设置数据属性，但可以使用相对路径

问带有刀锋的Laravel 5...使用路由时，我不能在使用辅助函数jQuery ()时设置数据属性，但可以使用相对路径
EN

Stack Overflow用户

提问于 2018-08-01 08:26:15

回答 1查看 242关注 0票数 1

带有刀片模板的Laravel 5.6.28 ...Laravel对我来说是新的-开放的建议。谢谢!

使用jQuery，我试图在导航栏中添加一个'active‘类到与加载的页面相关联的链接中，如果我使用相对路径，效果会很好，但当使用Laravel Blade route() helper函数时，就像在我的帐户链接中一样，"data-path“属性永远不会被设置。

我不确定是使用attr()方法有问题还是each()方法有问题？任何帮助都是非常感谢的。也许我应该使用vue.js？谢谢!

<div id="navwrapper" class="collapse navbar-collapse">
    <ul class="list-group">
        <li class="list-group-item">
            <a href="/" class="active" >Home</a>
        </li>
        <li class="list-group-item">
            <a href="{{ route('loginregister') }}">My Account</a>
        </li>
    </ul>
</div>

<script>
$(document).ready(function() {
    var basePath = window.location.href;
    var pathName = window.location.pathname;

    // remove active class on all nav links
    $("#navwrapper ul li a").removeClass("active");

    // get current link and add active class to it
    $("#navwrapper ul li a").each(function() {
        var dataPath = $(this).attr("href");
        var dataPathNoBase = dataPath.replace(basePath, '');
        $(this).attr("data-path", dataPathNoBase);
        if (dataPathNoBase == pathName) {
            $(this).addClass("active");
        }
    });
});
</script>

jquery

laravel

routes

laravel-blade

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-01 10:50:27

您可以通过将false作为第三个参数传递来强制Laravel使用相对路径，如下所示：

<li class="list-group-item">
    <a href="{{ route('loginregister',[], false) }}">My Account</a>
</li>

或者，如果你不需要使用jQuery来解决这个问题，你可以这样做：

<li class="list-group-item">
    <a href="{{ route('loginregister') }}" 
         @if(request()->is('loginregister')) class="active" @endif >
         My Account</a>
</li>

就我个人而言，我喜欢使用自定义刀片指令，因此我会将以下内容放入我的AppServiceProvider中：

public function boot(){
    Blade::directive('isActiveLink', function ($route, $name) {
        return request()->is($route) ? 'class="active" ' : '';
    });
}

然后在刀片模板中，我只需使用：

<li class="list-group-item">
    <a href="{{ route('loginregister') }}" @isActiveLink('loginregister')>My Account</a>
</li>

当然，如果您愿意，也可以在指令中构建整个链接。

这是Extending Blade Templates上相关的Laravel Doc的链接

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51623766

复制

相似问题

问带有刀锋的Laravel 5...使用路由时，我不能在使用辅助函数jQuery ()时设置数据属性，但可以使用相对路径
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有刀锋的Laravel 5...使用路由时，我不能在使用辅助函数jQuery ()时设置数据属性，但可以使用相对路径EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有刀锋的Laravel 5...使用路由时，我不能在使用辅助函数jQuery ()时设置数据属性，但可以使用相对路径
EN