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条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 Win7电脑开机出现硬件设置已更改
      • ¥15 vba代出现莫须有错误,都是一个个复制下来的为啥出错呢?
      • ¥15 /etc/vsftpd/vsftp.conf配置文件加了一行utf8_filesystem=YES之后,启动vsftpd报错
      • ¥15 W5100可以收广播,但是无法发出广播
      • ¥100 PCD点云排序和分割
      • ¥15 GG-CNN抓取数据集
      • ¥15 C++类和对象,多态性,继承,虚函数虚基类
      • ¥15 使用VS2019和Dev c++按%p输出地址,结果相差很大
      • ¥30 有偿解惑TINA老报错,求解惑
      • ¥15 arduino esp8266 编译问题