1

テーマをダウンロードしましたが、問題が発生しているようです。問題のページはこちら - 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 クラスは、コーダーの友人のアドバイスで追加されました。ボタンは表示されますが、機能させることはできません。最初のコードブロックの「des」行の下にこれを追加しましたが、うまくいきませんでした:

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

だから…助けて！どうすればこれを機能させることができますか?

4

3 に答える 3

2

引用符の差し迫った問題は、他の人によって対処されています。コードの根本的な問題のいくつかに対処します。これにより、将来の間違いを防ぐことができます。

まずは

var obj = {}

これは JavaScript オブジェクト、具体的にはオブジェクト リテラルです。

第二に

JavaScript 変数は数字で始めることも、数字のみにすることもできないため、1 = {};無効です

オブジェクトを数値に割り当てて反復する代わりに、通常、必要なのはオブジェクトの配列です。そう...

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

このようにして、取得中にループでそれらを反復処理できwines[i]、コードが有効になります:)

第三に

一般に、js によってページに書き込まれる html の量を減らすようにすることをお勧めします。

なんで？innerHTML/.html() には多くのステートメントを含めることができるため、デバッグがはるかに簡単です。また、高速です。

ページに要素を配置し、 and を使用してそれらに書き込むか、jquery のセレクターおよび or を使用getElementByIdしてみてください。非表示にする必要がある場合は、html/css で最初に非表示に設定し、後でその css プロパティまたはクラスを js で変更します。textContenttext()html()

ついに

インライン onClicks は 90 年代です。そして、文字列を二重に交差させ始めると、文字通り頭痛の種になります。

jQueryのon()メソッドを使用するか、

document.getElementById('elem').onclick = function(){
   //Code here
};
于 2013-03-29T21:22:35.870 に答える
0

あなたの引用符は順不同です。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 &amp; Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee     &amp; 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>'
},
于 2013-03-29T20:41:03.030 に答える
0

引用符が問題を引き起こしています。

{
  name: 'Bar Soap',
  scent: 'Cucumber &amp; Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee &amp; 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>';
    }

また、すべての商品に「注文」属性を定義することを忘れないでください。

それが役立つことを願っています。

于 2013-03-29T20:45:46.170 に答える