如何將 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變量中的這個元素。