嘗試在我認為是變量的范圍內創建Javascript鏈接？

Question

我下載了一個主題，似乎遇到了一些麻煩。 有問題的頁面在這里-http://pureearthsoaps.com/test.html

每個產品都是使用（如果我已經正確解釋的話）Javascript變量創建的。 見下文：

  1: {
name: 'Bar Soap',
scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee & Hazelnut, Apple, and more',
size: '1 bar',
price: '3.<span class="small">95</span>',
short_desc: 'An innovative and moisturizing way to keep shower time fun.',
desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.'},

我在此處輸入信息，它與此處的代碼相對應：

      __ += '<li id="wine-list-'+i+'">'+wines[i].name+',</li>';
  full += '<div id="wine-info-'+i+'" class="wine-info transition-05"><h2>'+wines[i].name+'</h2><h4></h4>'+
    '<div class="line"></div>'+
    '<div class="price">$'+wines[i].price+'</div>'+
    '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
    '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
    '<div class="img"></div>'+
    '<div class="bottle-x"></div>'+
    '<div class="desc">'+wines[i].desc+'</div>'+
    '<div class="order">'+wines[i].order+'</div>'+
  '</div>';

當前，該產品頁面上顯示的“立即訂購”按鈕出現在每個產品上，但無法鏈接。 上面“ order”的div類是在編碼朋友的建議下添加的； 它使按鈕出現，但我們無法使其起作用。 我在第一個代碼塊的“ desc”行下添加了此代碼，但沒有運氣：

    order: '<a  onClick="location.href='http://google.com'" href="http://google.com"></a>'

所以...求助！ 我該如何工作？

Answer 1

其他人已經解決了眼前的報價問題。 我將解決您代碼中的一些潛在問題，這將有助於防止將來出現錯誤。

首先

var obj = {}

這是一個JavaScript對象，特別是對象文字。

其次

JavaScript變量不能以數字開頭或只能是數字，因此1 = {}; 是無效的

通常，您需要的是對象數組，而不是將對象分配給數字並遍歷它們。 所以...

var wines = [{name:'wine', blah:'', ......}, {name:'second wine', ....}]

這樣，您就可以在獲取wines[i]同時循環遍歷它們，您的代碼將是有效的:)

第三

通常，嘗試減少js寫入頁面的html數量是一個好習慣。

為什么？ 這是一種更容易調試的方法，因為innerHTML / .html（）可以包含許多語句。 而且速度也更快。

嘗試在頁面上放置textContent ，並使用getElementById和textContent對其進行寫入，或者使用jquery的選擇器和text()或html() 。 如果需要隱藏它們，請將它們設置為在html / css中初始隱藏，然后在以后使用js修改該css屬性或類。

最后

內聯onClick大約是90年代。 當您開始使用雙弦琴弦時，確實會引起您的頭痛。

使用jQuery的on()方法或

document.getElementById('elem').onclick = function(){
   //Code here
};

Answer 2

您的引號不正確。 以及為什么擁有href卻需要onClick？ 嘗試這個：

order: '<a href="http://google.com">order now</a>'

或這個

order : '<a href="#" onClick="location.href=\"http://google.com\"">order now</a>'

我只是看了看您的網站，似乎不存在order屬性。 這是一個這樣的例子。 還介意花括號的位置， oder行有在里面。

1: {
  name: 'Bar Soap',
  scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee     & Hazelnut, Apple, and more',
  size: '1 bar',
  price: '3.<span class="small">95</span>',
  short_desc: 'An innovative and moisturizing way to keep shower time fun.',
  desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself  to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.',
  order: '<a href="/order.php">order now</a>'
},

Answer 3

引號引起您的問題。

{
  name: 'Bar Soap',
  scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee & Hazelnut, Apple, and more',
  size: '1 bar',
  price: '3.<span class="small">95</span>',
  short_desc: 'An innovative and moisturizing way to keep shower time fun.',
  desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.',
  order_url: 'http://google.com'
}

然后，執行以下操作：

for (var i in wines) {
      _ += '<li id="wines-'+i+'"><h2>'+wines[i].name+'</h2>'+
        '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
        '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
        '<div class="img"></div>'+
        '<div class="line"></div>'+
        '<div class="short-desc">'+wines[i].short_desc+'</div>'+
        '<div class="price">$'+wines[i].price+'</div>'+
      '</li>';
      __ += '<li id="wine-list-'+i+'">'+wines[i].name+',</li>';
      full += '<div id="wine-info-'+i+'" class="wine-info transition-05"><h2>'+wines[i].name+'</h2><h4></h4>'+
        '<div class="line"></div>'+
        '<div class="price">$'+wines[i].price+'</div>'+
        '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
        '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
        '<div class="img"></div>'+
        '<div class="bottle-x"></div>'+
        '<div class="desc">'+wines[i].desc+'</div>'+
        '<a href="'+wines[i].order_url+'"><div class="order"></div></a>'+
      '</div>';
    }

另外，不要忘記為所有商品定義“訂單”屬性。

希望能有所幫助。