dstxpei5823 2016-07-14 16:38
浏览 40
已采纳

在视图中输出数组数据并通过Javascript控制

I am having a few issues outputting some array data. My array looks like the following

array:2 [▼
  "folder1" => array:5 [▼
    0 => "4.png"
    1 => "2.png"
    2 => "1.png"
    3 => "3.png"
    4 => "5.png"
  ]
  "folder2" => array:5 [▼
    0 => "2.png"
    1 => "3.png"
    2 => "4.png"
    3 => "1.png"
    4 => "5.png"
  ]
]

So this array is passed to my view. What I am attempting to do is display the folder names (folder1, folder2) as select options. This part is pretty straight forward (using Blade templating engine)

<div class="row">
    <div class="col-md-7">
        @if(!empty($fileData))
            <select class="folderName" name="folderName">
                @foreach($fileData as $folder => $files)
                    <option value="{{ $folder }}">{{ $folder }}</option>
                @endforeach
            </select>
        @endif
    </div>
</div>

The problem is that if for instance folder1 is selected from the select box, I then need to display the content of folder1 (4, 2, 1, 3, 5) as radio buttons. If folder2 is selected, it needs to display folder2's data as radio buttons. I would imagine Javascript is required to achieve this - the only thing I can think off is creating hidden divs and turning the on and off as a when is needed e.g.

@foreach($fileData as $folder => $files)
    <div id="folder1">
        @if($folder == 'folder1')
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio">{{ $image }}</label>
                </div>
            @endforeach
        @endif
    </div>
    <div id="folder2">
        @if($folder == 'folder2')
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio2">{{ $image }}</label>
                </div>
            @endforeach
        @endif
    </div>
@endforeach

Controlled by

$( ".folderName" ).change(function() {
    if($(this).val() == 'folder1') {
        $('#folder1').css('display', 'block');
        $('#folder2').css('display', 'none');
    }
    else if ($(this).val() == 'folder2') {
        $('#folder2').css('display', 'block');
        $('#folder1').css('display', 'none');
    }
});

The problem I am finding with this approach is repeating the foreach loop within my view. Additionally, it is creating duplicate folder divs for some reason.

Given what I am attempting to do, what would be the best way to approach this?

Thanks

  • 写回答

1条回答 默认 最新

  • duanpai1920 2016-07-14 17:00
    关注

    I would put the entire div inside each of your @foreach loop:

    @foreach($fileData as $folder => $files)
    
        @if($folder == 'folder1')
            <div id="folder1">
                @foreach($files as $image)
                    <div class="radio">
                        <label><input type="radio" name="optradio">{{ $image }}</label>
                    </div>
                @endforeach
            </div>
        @endif
    
        @if($folder == 'folder2')
            <div id="folder2">
                @foreach($files as $image)
                    <div class="radio">
                        <label><input type="radio" name="optradio2">{{ $image }}</label>
                    </div>
                @endforeach
            </div>
        @endif
    
    @endforeach
    

    This way it's only showing the div that matches the condition, instead of displaying two div's and filling the one that matches the condition

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 qc代码,修改和添加东西
  • ¥50 Unity的粒子系统使用shadergraph(内置管线)制作的一个顶点偏移shader,但是粒子模型移动时,顶点也会偏移
  • ¥15 如何用python处理excel的数据(极值标准化)
  • ¥15 三向应力状态求剪应力
  • ¥15 jupyter notebook如何添加libGL.so.1库
  • ¥20 easyPoi能否实现下拉多选或者复选框
  • ¥15 网桥在转发帧时,会变帧的源地址和目的地址吗?
  • ¥15 用Multisim设计汽车尾灯控制电路
  • ¥100 求用matlab求解上述微分方程的程序代码
  • ¥15 MAC安装佳能LBP2900驱动的网盘提取码