jQuery 图像交换

Question

例如，我有 3 个色域。

• 颜色
• 完成突出
• 显示

现在，当用户单击“颜色”时，图像会根据颜色发生变化。当用户单击“完成”时，饰面会发生变化，并且颜色选择保持为他们选择的......等等。

我正在尝试用 jQuery 来完成这个任务。我正在考虑对产品进行命名约定......类似于“Product_Color_Finish_Highlights.jpg”的内容，然后我将结合所做的选择来更改文件名的适当“部分”。然后将新文件名作为“target_image”的“src”发送。

我已经编写了一些内容，例如手风琴菜单和其他简单的内容，但没有任何内容需要更改图像的源。我已经读了几天了，只是无法想出一个好的起点，或者为此制定“攻击计划”。

我不认为我需要太多关于实际 jQuery 的帮助，但只是......从哪里开始？ 我该如何攻击这个？

Answer 1

从这个开始：

$('#your-image-selector').attr('src', 'product_color_finish_or_whatever.jpg');

或者，澄清一下您的需要，您将获得更具体的帮助。

进入猜测模式。你暗示了一些更基于惯例的东西。假设您有以下标记，可能是由脚本生成的：

<div id="pickers">
  <select id="color">
    <option value="blue">
  </select>
  <img id="color-swatch"/>

  <select id="finish">
    <option value="blue">
  </select>
  <img id="finish-swatch"/>

  <select id="highlights">
    <option value="blue">
  </select>
  <img id="highlights-swatch"/>

您可以使用以下内容驱动 img src 标记：

$('#pickers > select').bind('load change', function(){
  $(this).next().attr('src', 'Product_' + $(this).val() + '.jpg');
});

这不需要任何特定的类或 ID - - 只是 select 位于 img 旁边，并且 img 文件名包含选择器中的值。

那是什么？您不希望您的图像与选择器相邻？ OK，然后，将两者通过 picker-id whatever 的 id 约定和 whatever--swatch 的相关 image-id 链接在一起。然后这段代码将起作用：

$('#pickers > select').bind('load change', function(){
  $('#' + $(this).attr('id') + '-swatch')
    .attr('src', 'Product_' + $(this).val() + '.jpg');
});

这应该使用该约定来查找图像并更新其src。

这些代码示例都没有经过测试，但它们应该会激发一些可行的东西。