HTML JQuery 图像选择器答案

【问题标题】：HTML JQuery Image SelectorHTML JQuery 图像选择器
【发布时间】：2015-10-02 16:30:47
【问题描述】：

每当我选择图像时，都会显示文本“窗口图像”。

这是我需要用另一个图像替换的代码。

 <div class="product">
            <img id="model" src="images/casement.png" alt="Window Image" />

          </div>

这些是选择后应该出现在产品上的选项：

<table>
          <tr>
            <td><img src="images/awning.png" id="Awning" class="wmodel wmodel-clickable"></img></td>
            <td><img src="images/sliding.png" id="Sliding" class="wmodel wmodel-clickable"></img></td>
            <td><img src="images/casement.png" id="Casement" class="wmodel wmodel-clickable"></img></td>     
          </tr>
</table>

JQuery:

$('.wmodel-clickable').each(function() {
  $(this).attr('title', $(this).attr('id'));
});
$('.wmodel-clickable').tooltip();

$(".wmodel-clickable").click(function() {
  $("#model").attr('src', $(this).css('src'));
  $("#window-name").html($(this).attr("id"));

});

编辑：如果我要添加所选图像的蒙版版本，我应该添加什么？我做了一个蒙版图像，所以我可以改变它的颜色。

蒙版图像的 HTML：

<img id="mask" class="mask" src="images/casement-mask.png" alt="Mask Image" />

【问题讨论】：

标签： jquery html image

【解决方案1】：

问题出在这一行：

$("#model").attr('src', $(this).css('src'));

即$(this).css('src')。没有src CSS 属性。应该是$(this).attr('src')。

【讨论】：

有效！谢谢！如果我要添加所选图像的蒙版版本，我应该添加什么？

【解决方案2】：

要显示蒙版版本，您可以替换图像路径：

$("#model").attr('src', $(this).attr('src').replace(/\.png$/, "-masked.png"));

这仅适用于 PNG，每次添加具有其他扩展名的图像时，或者如果蒙面图像不以“-masked”结尾时，您都必须扩展替换正则表达式。

因此更好的解决方案是将蒙版图像的文件名添加为数据属性：

<td><img src="images/casement.png" data-path-masked="images/casement-masked.png" id="Casement" class="wmodel wmodel-clickable"></img></td>

然后你可以这样显示蒙版图像：

$("#model").attr('src', $(this).data('path-masked'));

【讨论】：