2014-02-17 151 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),這會使代碼中的事情變得更加清晰。有一條學習曲線,但它對你正在做的事情是值得的。

相關問題