2014-02-17 191 views
2

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

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

这就是我想:

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

这是下面的jsfiddle连接线27。

JSFIDDLE COMPLETE DEMO

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

回答

1

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

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

它确实选择了具有匹配标题的产品,但功能已损坏,确实存在很大差异(重复的产品不再被删除等) – Chris

+0

我以为原始文件因为使用了导论而被破坏。对不起,我更新了一个更正的链接。 – zord

+0

答案接受;你有什么不同吗?任何公然的错误或不好的做法?我知道它不是真正的模块化,也不是真的遵循任何设计模式,但是.. – Chris

1

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

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

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

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

相关问题