Enhancement #8 - Refactoring String HTML

jsmodules · Jul 8, 2016 · 91353af · 91353af
1 parent 5e32fc7
commit 91353af
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/dist/jquery.ddslick.min.js b/dist/jquery.ddslick.min.js
diff --git a/src/jquery.ddslick.js b/src/jquery.ddslick.js
@@ -140,14 +140,13 @@
                 //Add ddOptions to the container. Replace with template engine later.
                 $.each(options.data, function (index, item) {
                     if (item.selected) options.defaultSelectedIndex = index;
-                    ddOptions.append("<li>" +
-                        "<a class='dd-option'>" +
-                            (item.value ? " <input class='dd-option-value' type='hidden' value='" + item.value + "' />" : "") +
-                            (item.imageSrc ? " <img class='dd-option-image'" + (options.imagePosition === "right" ? " dd-image-right" : "") + "' src='" + item.imageSrc + "' />" : "") +
-                            (item.text ? " <label class='dd-option-text'>" + item.text + "</label>" : "") +
-                            (item.description ? " <small class='dd-option-description dd-desc'>" + item.description + "</small>" : "") +
-                        "</a>" +
-                    "</li>");
+                    var ddList = $("<li>").append($("<a>").addClass("dd-option"));
+                    var ddOption = ddList.find("a");
+                    if(item.value) ddOption.append($("<input>").addClass("dd-option-value").attr("type", "hidden").val(item.value));
+                    if(item.imageSrc) ddOption.append($("<img>").attr("src", item.imageSrc).addClass("dd-option-image" + (options.imagePosition === "right" ? " dd-image-right" : "")));
+                    if(item.text) ddOption.append($("<label>").addClass("dd-option-text").text(item.text));
+                    if(item.description) ddOption.append($("<small>").addClass("dd-option-description dd-desc").text(item.description));
+                    ddOptions.append(ddList);
                 });
 
                 //Save plugin data.
@@ -281,12 +280,11 @@
 
         //If set to display to full html, add html
         if (settings.showSelectedHTML) {
-            ddSelected.html(
-                    (selectedData.imageSrc ? "<img class='dd-selected-image'" + (settings.imagePosition === "right" ? " dd-image-right" : "") + "' src='" + selectedData.imageSrc + "' />" : "") +
-                    (selectedData.text ? "<label class='dd-selected-text'>" + selectedData.text + "</label>" : "") +
-                    (selectedData.description ? "<small class='dd-selected-description dd-desc'" + (settings.truncateDescription ? " dd-selected-description-truncated" : "") + "' >" + selectedData.description + "</small>" : "")
-                );
-
+            var ddSelectedData = $("<div>");
+            if(selectedData.imageSrc) ddSelectedData.append($("<img>").addClass("dd-selected-image" + (settings.imagePosition === "right" ? " dd-image-right" : "")).attr("src", selectedData.imageSrc));
+            if(selectedData.text) ddSelectedData.append($("<label>").addClass("dd-selected-text").text(selectedData.text));
+            if(selectedData.description) ddSelectedData.append($("<small>").addClass("dd-selected-description dd-desc" + (settings.truncateDescription ? " dd-selected-description-truncated" : "")).text(selectedData.description));
+            ddSelected.html(ddSelectedData.html());
         }
         //Else only display text as selection
         else ddSelected.html(selectedData.text);