jQuery 图像交换答案

【问题标题】：jQuery Image SwappingjQuery 图像交换
【发布时间】：2011-10-09 19:56:05
【问题描述】：

例如，我有 3 个色域。

颜色
完成
亮点

现在，当用户单击“颜色”时，图像会根据颜色发生变化。当用户单击“完成”时，完成更改，颜色选择保持他们选择的状态......等等。

我正在尝试在 jQuery 中完成此操作。我正在考虑对产品进行命名约定......类似于“Product_Color_Finish_Highlights.jpg”的内容，然后我将更改文件名的适当“片段”以及所做的选择。然后将新文件名作为 'target_image' 的 'src' 发送

我已经写了一些东西，比如手风琴菜单和其他简单的东西，但是我不需要更改图像的来源。我已经阅读了几天，只是无法围绕一个好的起点或“攻击计划”来解决这个问题。

我认为我不需要对实际的 jQuery 提供太多帮助，而只是......从哪里开始？我该如何攻击它？

【问题讨论】：

标签： jquery image swap

【解决方案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"/>

你可以用这个来驱动imgsrc标签：

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

这不需要任何特定的类或 ID — 只需 selects 位于 imgs 旁边并且 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。

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

【讨论】：

谢谢，这正是我所希望的。