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

Question

我有一个JSON提要，我提取值以填充包含产品大小，颜色/缩略图的选择菜单，并在提交时获取对象中的值。

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

这就是我的尝试：

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

这是在下面jsfiddle链接的第27行。

JSFIDDLE COMPLETE DEMO

P.S。我也很感激关于结构的任何提示，我知道它很乱。

Answer 1

this fiddle符合您的要求吗？ 我在两个地方更改了一些代码，我将原始行留在那里作为参考。 基本上，我将图像直接分配给mainImg。然后在添加类时使用它。此外，您在图片html中错过了几个'：

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

Answer 2

部分问题在于您尝试在for循环中设置活动缩略图，而在此时，可以使用JQuery属性选择器：

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

我已经更新了原始的Fiddle，显示一旦创建了所有动态元素，上面的语句就可以了。 （第87行）

就样式而言，可能值得查看一个数据绑定/模板框架（例如KnockoutJS），这将使代码中的内容更加清晰。有一个学习曲线，但你正在做的事情是值得的。