如何将 select 元素放入 label 输入单选 select

Question

我在 Laravel 上有一个项目 8. 我试图让人们从图库中更改他们的个人资料图片。 这就是我显示所有可用图像的方式

@foreach(glob(storage_path('app/public/gallery/*.png')) as $image)
    <div class="col-2 mb-3">
        <label for="{{ basename($image, '.png') }}" class="w-100">
            <img src="{{ url('storage/gallery/' . basename($image)) }}" width="100px" height="100px" />
            <input type="radio" name="profilephoto" value="{{ url('storage/gallery/' . basename($image)) }}" id="{{ basename($image, '.png') }}" />
        </label>
    </div>
@endforeach

（免费 HTML）

<label for="photo1" class="w-100">
    <img src="https://example.com/storage/gallery/photo1.png" width="100px" height="100px" />
    <input type="radio" name="profilephoto" value="https://example.com/storage/gallery/photo1.png" id="photo1" />
</label>
<!-- ... more labels&inputs -->

我正在尝试 select 到 jQuery <img>元素，以便我可以向它添加一些视觉效果。 这就是我正在尝试的方式：

$('input[type="radio"][name="profilephoto"]').on('change', function() {
    $('label[for="' + $(this).attr('id') + '"]').find('img').addClass('border')
});

但它不起作用。 知道怎么做吗？

Answer 1

这是您的解决方案：

1. 在单选按钮上创建一个 onclick function 并像this传递：

onclick="some(this)"

2. 在该 function 中，在参数中接收它并获取其父项，例如：

some(eve) {
  parent = $(eve).parent();
}

3. 然后在其中找到图像标签，例如：

image = $(parent).find(img);

4. 现在将你想要的任何 css 应用到image变量中的这个元素。