从菜单中选择链接时，转到引导模式中的正确链接

Question

我有一个这样的菜单：

<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>

当我打开那个模式时，它看起来像这样：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title text-center">My Listings</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 no-padding-xs">
                        @foreach( Auth::user()->listings as $listing )
                            <a href="{{ ( Go to the correct link based on the menu selected) }}">
                            <h1>{{ $listing->name }}</h1>
                            </a>  
                        @endforeach
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

如何做到这一点，如果用户点击“工具”链接，它将自动替换或附加模式中 href 中的 /tools

例如，如果他们从菜单中选择仪表板，我希望链接在模态 a href 中是 href="/listing/{{ $listing->slug }}/dashboard"

Answer 1

这一切都必须在 JS 中完成。为每个锚标签添加一个data-url，并为每个锚标签添加一个公共类：

<li><a href="" data-url="/dashboard" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-url="/tools" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-url="/billing" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>

您还需要在模态框的锚标记中添加一个通用类并设置 url 的开头：

<div class="col-md-12 no-padding-xs">
     @foreach( Auth::user()->listings as $listing )
          <a href="/listing/{{ $listing->slug }}" class="url-on-modal" >
              <h1>{{ $listing->name }}</h1>
          </a>  
     @endforeach
</div>

在你的 js 文件中，使用 jquery 你需要监听 onclick 事件：

$("a.link-to-modal").on('click', function(e){ // cliking on the menu
    e.preventDefault();
    var _this = $(this);
    var _url  = _this.data('url'); // getting the url from the anchor tag either /dashboard /tools /billing

    $('a.url-on-modal').each(function(i, obj) {
        var original_url = $(this).attr("href"); // getting url
        var new_url      = original_url+_url;    // concatenating both url /listing/slug/dashboard

        $(this).attr("href", new_url); // updating href
    });
});