Question

HTML：

<div id="product-main-image">
     <img src="path/to/image.jpg">
</div>
<select id="selection" name="selection">
    <option value="someval1"> Red </option>
    <option value="someval2"> Blue </option>
</select>

JS：

jQuery("#selection").change(function() {
        var str = "";
        jQuery("#selection option:selected").each(function() {
            str += jQuery( this ).text() + " ";
        });
        str = str.toLowerCase().trim(); //red or blue

        var new_img = jQuery("#product-main-image img").attr('data-zoom-image'); //here i get path/to/image.jpg
        //what now??
});

结果： 我应该获得path / to / image-red.jpg或path / to / image-red.jpg

注意：扩展程序可以是jpg，jpeg，png，gif等。

Answer 1

你可以像这样做一个相当简单的基于正则表达式的替换：

var str = 'red';
var new_img = 'path/to/image.jpg';
new_img = new_img.replace(/(\.[a-z]{3,4})$/,'-'+str+'$1');
console.log(new_img); //"path/to/image-red.jpg"

（您应该能够将所有代码作为测试版本复制并粘贴到控制台中）

根据选择框更改图像的文件名

1 个答案: