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文件名包含来自选择器。

那是什么？你不希望你的图像与拣货员相邻吗？好的，然后将两者一起使用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。

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

jQuery图像交换

1 个答案: