Question

在页面中，我有以下代码重复多次：

<tr>

    <td>

        <div class="image_showcase"></div> <!-- This is the images preview area -->

    </td>

</tr>

<tr data-name="select_name">

    <td>

        <select> <!-- This is the select that allows to pick images -->
            <option name='img_01' value='img_01'>Image 01</option>
            <option name='img_02' value='img_02'>Image 02</option>
            <option name='img_03' value='img_03'>Image 03</option>
        </select>       

    </td>

</td>

选择提示您在多个图像/背景之间进行选择，而上述“”应该为用户提供预览。我因此得到了以下脚本：

jQuery("tr[data-name='select_name'] select").change(function(){

    jQuery("div.image_showcase").css('background-image', 'url("http://127.0.0.1/name/img/'+jQuery(this).val()+'.jpg")');

});

该脚本有效，并为您提供了图像的预览，但有2个严重的缺陷，我似乎无法克服：

如果我重新加载页面，预览区域将显示为空。我实际上需要先与选择进行交互才能显示图像。我意识到我必须定位“tr [data-name ='select_name']选择选项：选择”不知何故，但我没有真正管理。
如前所述，这些“选择+预览区域”在页面中出现多次。如代码所示，如果我编辑一个选择（4个中，我们说），每个预览区域将改变图像。如何更改我的代码，以便每个选择都定位在它正上方的预览区域？

预览来自多个定期选择/预览区域的图像

0 个答案: