Question

每当我选择图像时，文字＆＃34;窗口图像＆＃34;而是显示。

这是我需要用另一张图片替换的代码。

 <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" />

Answer 1

问题出在这一行：

output

即$("#model").attr('src', $(this).css('src'));。没有$(this).css('src') CSS属性。它应该是src。

Answer 2

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

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

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

因此，更好的解决方案是将屏蔽图像的文件名添加为data-attribute：

<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'));

HTML JQuery图像选择器

2 个答案: