Question

困惑吧？标题。是的，我知道，但现在知道如何更好地描述它。

我有以下内容： - 9个目标 - 每个目标有3个包 - 每个包都有1个packageinfo //与此问题无关。

// Relations
- Objective->hasMany('Package');
- Package->belongsToMany('Objective');

在我的网站页面上，我显示所有（9）目标。当用户点击目标时，我希望显示相关的包。但我真的不清楚如何做到这一点（客户端）..

我试过了：

@foreach($objectives as $objective)
    <div class="col-4">
        <span class="{{$objective->icon}}"></span>
        {{$objective->naam}}
    </div>
    @foreach($objective->packages() as $package)
        <div style="">
            {{$package->title}}
            {{$package->information}}
            {{$package->link}}
        </div>
    @endforeach
@endforeach

这既没有显示相关的包也没有给我一个错误。除此之外。它甚至是正确的我在做什么？

我也尝试用jquery获取软件包，但这没有用。我的问题......我怎样才能做到最好？（应该隐藏包直到用户点击目标，而不进行任何页面更改）

-----------------编辑

请忽略上面的代码。

我有以下代码：

    <script>
$(document).ready(function(){
    $('.objective').on('click',function(){

        var objective = $(this).data('titel');
        document.getElementById('objective').value = $(this).data('title');

        // this doesnt work i know, but its here to explain the stuff beneath this.
        $id = document.getElementById('objective').value;

        // code which gets the id of hidden input and finds all packages related to this objective id.
        // i.e. Package::with('objectives')->where('id','=', $id)->get();
        // save it as $packages. Which will fill the second foreach

    });



});

</script>

<div class="col-12">
    <input type="hidden" name="objective" id="objective" />
    @foreach($objectives as $objective)
        <div class="col-4 objective" data-title="{{$objective->id}}">
            <span class="{{$objective->icon}}"></span>
            {{$objective->name}}
        </div>
    @endforeach
</div>

// the two have to be seperate from eachother in order to succesfully show related packages.
<div class="col-12">
    @foreach($packages as $package)
        <div>
            {{$package->title}}
            <?php $information = explode(',',$package->information); ?>
            @foreach($information as $info)
                {{$info}}<br />
            @endforeach
            {{$package->link}}
        </div>
    @endforeach
</div>

Answer 1

有很多方法可以做到这一点。您可以执行自我发布的PHP页面，或者通过单击具有innerHTML HTML属性的元素，使用JavaScript修改outerHTML或onClick。

Answer 2

对于PHP / Laravel方面，更改@foreach语句以删除()之后的packages：

@foreach($objective->packages as $package)

（这假设您的hasMany关系被称为packages ...仔细检查您的客观模型中的情况。）

因此，您的控制器将收集所有目标及其相关的包：

$objectives = Objective::with('packages')->get();

...并将整个$objectives结果传递给视图。现在，在视图中，您拥有所有目标和包，并且不需要使用javascript或ID匹配动态检索它们。

对于响应点击方面的内容，正如其他人所说，您需要使用javascript切换显示/隐藏作为对onClick的回复。

如果您希望您的包列表与您的目标显示位置分开，即：

---
Package 1
Package 2
Package 3
...
---
Objectives (of the chosen package above)
---

...然后在您的布局中分离您的循环，并根据所选包的ID（您可以将其存储在<div>属性中显示/隐藏相应的data，而不是隐藏的输入字段）。

<div id="objectives">
    @foreach($objectives as $objective)
        <div class="objective" data-objective-id="{{$objective->id}}">
            {{$objective->naam}}
        </div>
    @endforeach
</div>

<div id="packages">
    @foreach($objectives as $objective)
        <div id="{{$objective->id}}" class="hide">
            @foreach($packages as $package)
                <div>
                    {{$package->title}}
                </div>
            @endforeach
        </div>
    @endforeach
</div>

然后，您的jQuery会通过使用objectiveId阅读所点击的<div>的{{1}}数据值来响应对目标的点击（或者您可以将ID存储在{包含链接的{1}}标记，然后.data( "objectiveId" )下面相应的包<a>，其ID为show。您的包div已经预先填充了数据，因此在单击目标时无需继续进行数据库调用来检索数据。

用户点击后获得关系

2 个答案: