在JQuery中創建文本框按鈕和分配點擊功能

我有以下代碼爲頁面上的每個texbox創建兩個按鈕（右邊一個）。想法是做一個遞增/遞減文本框。代碼可以正常使用一個文本框，但每個按鈕增加/減少2個或更多的文本框。在JQuery中創建文本框按鈕和分配點擊功能

任何想法如何快速創建按鈕並將它們附加到文本框以增加/減少？

jQuery.fn.incrementer = function() { 
    this.val(0); 
    this.before("<input class='incrementer_minus' type='button' value=' - '/>");   
    var myobj = this; 
    $(".incrementer_minus").live('click', function(){ 
     $(myobj).val(parseInt(JQ(myobj).val()) - 1); 
    }); 
    this.after("<input class='incrementer_plus' type='button' value=' + '/>"); 
    $(".incrementer_plus").live('click', function(){ 
     $(myobj).val(parseInt(JQ(myobj).val()) + 1); 
    }); 
} 

JQ("#increment").incrementer(); 
JQ("#increment2").incrementer();

來源

2010-07-02 Ergec

我在這裏很好奇，你使用'jQuery'，'JQ' *和*'$'來表示'jQuery'對象，所有這些的任何原因，甚至在同一行上交換？它使代碼很少可讀，只是想知道如果你有這樣做的原因:) – 2010-07-02 13:12:27

:)實際上，我只使用JQ，但從所有其他代碼複製/粘貼，我完全忘記清理:) – Ergec 2010-07-02 13:39:35

您關聯與click事件的incrementer_minus每實例， incrementer_plus當您做：

$(".incrementer_plus").live('click'...

您需要將事件附加到剛創建的特定事件。

我更改了您的代碼，因此我也使用bind而不是live，因爲您只需要不需要live。

爲了方便起見，我還將JQ更改爲jQuery。你可以改回它。

測試出來：http://jsfiddle.net/mAsr9/

jQuery.fn.incrementer = function() { 
    var myobj = this; 
    this.val(0); 

     // Create new element, and insert before 'this' 
    jQuery("<input class='incrementer_minus' type='button' value=' - '/>").insertBefore(this) 

      // Then bind the click event to that new element 
     .bind('click', function(){ 
      $(myobj).val(parseInt(jQuery(myobj).val()) - 1); 
     }); 

     // Create new element, and insert after 'this' 
    jQuery("<input class='incrementer_plus' type='button' value=' + '/>").insertAfter(this) 

      // Then bind the click event to that new element 
     .bind('click', function(){ 
      $(myobj).val(parseInt(jQuery(myobj).val()) + 1); 
     }); 
} 

$(function() { 
    jQuery("#increment").incrementer(); 
    jQuery("#increment2").incrementer(); 
});

來源

2010-07-02 13:08:24 user113716

.before（）和.insertBefore（）。現在我懂了。我需要學習更多:) – Ergec 2010-07-02 13:52:23

@Ergec - 是的，那些聰明的jQuery人給了我們兩種做同樣事情的方法，只有他們允許我們交換插入元素和目標的順序，以便我們可以執行適當的鏈接。另一種方法是先創建新的元素並將其存儲在一個變量中。 'var $ minusInput = $（''）;'然後執行'this.before（$ minusInput）;'''minusInput.bind（func ...）;' – user113716 2010-07-02 13:59:13

非常感謝patric – Ergec 2010-07-04 07:33:03

你是紡紗後..
下面是一些插件..
http://plugins.jquery.com/project/spinbox
http://docs.jquery.com/UI/Spinner
http://www.command-tab.com/2007/05/07/jquery-spinner-plugin/

來源

2010-07-02 12:50:09 Kai

是的那裏有很多插件，關鍵是我想學習如何做這樣的事情。我的意思是在動態創建元素並做這種事情。仍然感謝您的幫助:) – Ergec 2010-07-02 13:46:55

看一看jQuery的增量插件： http://sean-o.com/increment

我創建它就是這樣一個使用，希望它可以（仍然γ）對你的幫助。

來源

2010-11-29 14:53:52

回答

相關問題