2012-09-29 168 views
0

嗨,我有一個名爲calc的對象。在這裏面我有幾個函數,包括init。我有三個按鈕,我使用jquery追加到div。所以當用戶點擊任何按鈕時,它將觸發輸入功能,並且在基於這些條件的一些if else語句之後,它將調用三個功能中的其餘部分,其中一個是calculate,resetemailtofriend問題是它不會調用輸入函數以外的其他函數。爲什麼它的行爲如何以及如何使其工作?javascript函數不起作用

這裏是我的代碼

JS

var jQuery, container, output, 
    calc = { 
     init: function() { 
      container = $('.calculate'); 

      $(document).on('click','.userButtons',calc.input); 

      calc.widgetDesign(container); 
     }, 
     widgetDesign: function (container) { 
      var widgetContainer = $('<div />').addClass('calculateContainer'), 
       form    = $('<div />'), 
       buttons   = $('<div />'); 

      buttons.append('<button rel="reset" class="userButtons">Reset</button><button rel="emailtofriend" class="userButtons">Email to a friend</button>'); 

      form.append('<div class="label">Weight (kg):</div>'); 
      form.append('<input type="text" name="weight" class="weight inputs" />'); 
      form.append('<div class="label">Height (cm):</div>'); 
      form.append('<input type="text" name="height" class="height inputs" />'); 
      form.append('<div><button rel="calculate" class="userButtons calcButton">Calculate</button></div>'); 

      widgetContainer.append(form); 

      widgetContainer.append(buttons); 

      widgetContainer.appendTo(container); 
     }, 
     input: function() { 
      var button = $(this).attr('rel'); 

      if (button == 'calculate') { 
       console.log(button); 
       calc.calculate; 
      } else if (button == 'reset') { 
       console.log(button); 
       calc.reset; 
      } else if (button == 'emailtofriend') { 
       console.log(button); 
       calc.emailtofriend; 
      } 
     }, 
     calculate: function() { 
      console.log('hello'); 
     }, 
     reset: function() { 
      alert('reset'); 
     }, 
     emailtofriend: function() { 
      alert('emailtofriend'); 
     } 
    }; 
    calc.init();​ 

這裏是jsfiddle

回答

1

您將需要調用的功能,而不是僅僅選擇它們:-)

 if (button == 'calculate') { 
      console.log(button); 
      calc.calculate(); 
     //    ^^ 
     } else if (button == 'reset') { 
      console.log(button); 
      calc.reset(); 
     //   ^^ 
     } else if (button == 'emailtofriend') { 
      console.log(button); 
      calc.emailtofriend(); 
     //     ^^ 
     } 

Btw:這可以是wri tten使用括號標記爲成員運營商更短:

if (button in calc) { 
    console.log(button); 
    calc[button](); 
} 
+0

這對我來說 – 2619

+0

工程較短的形式不工作對我來說很好:http://jsfiddle.net/TvuXL/4/ – Bergi

1

你應該把括號的函數名()末,就像這樣:

 if (button == 'calculate') { 
      console.log(button); 
      calc.calculate(); 
     } else if (button == 'reset') { 
      console.log(button); 
      calc.reset(); 
     } else if (button == 'emailtofriend') { 
      console.log(button); 
      calc.emailtofriend(); 
     }