尝试在我认为是变量的范围内创建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>';
    }

另外，不要忘记为所有商品定义“订单”属性。

希望能有所帮助。