默认情况下在页面加载时选择图片

我有一个JSON订阅源，我提取这些值以填充产品大小，颜色/缩略图的选择菜单，并在提交时获取对象中的值。默认情况下在页面加载时选择图片

我所需要的是在默认情况下选择图像，如果其标题是匹配声明并且在顶部（例如var initialColour = "Wheat";）初始化的变量的值。因此，如果initialColour是“Brown”，则应默认选择标题为“Brown”的图片，并且下拉菜单中的尺寸应反映选择。

这就是我想：

  if(mainImg.attr('title') == initialColour) { 
       $(this).addClass("active"); 
      }

这是下面的jsfiddle连接线27。

JSFIDDLE COMPLETE DEMO

附：我也很感激任何有关结构的提示，我知道它是一团糟。

是this fiddle做你想要的吗？
我在两处修改了一些代码，我在那里留下了原始的行作为参考。基本上，我将图像直接分配到mainImg。然后在添加类时使用它。此外，你错过了一对夫妇的' S IN像HTML浏览：

问题的

$("<img src="+constructImageURL(mainImgID)+" id="+mainImgID+" class='colourThumb' title="+colour+" data-value='"+colour+"'> ")

部分原因是，你想在for环路内设置活动缩略图，而不是供，jQuery的属性选择器可以使用：

 $("#colourId .colourThumb[title='"+initialColour+"']").each(function() { 
      $(this).addClass("active"); 
     });

我已经更新了原来的Fiddle显示已创建，一旦所有动态元素，上面的语句，会做的伎俩。（Line 87）

就风格而言，可能需要查看一个数据绑定/模板框架（例如KnockoutJS），这会使代码中的事情变得更加清晰。有一条学习曲线，但它对你正在做的事情是值得的。