jQuery - बटन दबाए जाने पर काउंटर के मूल्य को बढ़ाएं

मैं एक ऐसी प्रणाली बना रहा हूं जहां कोई उपयोगकर्ता एक बटन क्लिक करता है और उनका स्कोर बढ़ता है। बटन पर क्लिक होने पर एक काउंटर है जो मैं jQuery का उपयोग करने के मूल्य को बढ़ाने के लिए चाहता हूं (ताकि पृष्ठ को रीफ्रेश करने की आवश्यकता न हो)।jQuery - बटन दबाए जाने पर काउंटर के मूल्य को बढ़ाएं

मैं इसके बारे में कैसे जाऊं?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
<script type="text/javascript"> 

$("#update").click(function() { 
$("#counter")++; 
} 

</script>

# अपडेट बटन है, # काउंटर काउंटर है।

PHP में, ++ कुछ मूल्य बढ़ाता है। JQuery समकक्ष क्या है?

साथ ही, जब बटन क्लिक किया जाता है, तो उसे एक अनुरोध भेजने की आवश्यकता होती है जो पेज रीफ्रेशिंग के बिना एक mysql डेटाबेस में स्कोर मान अपडेट करता है। क्या कोई जानता है कि मैं ऐसा कैसे करूं?

धन्यवाद एक बहुत

अद्यतन:

मैं नीचे दिए गए तरीकों में कुछ की कोशिश की है, लेकिन कुछ भी काम करने के लिए लगता है! क्या मुझे इसके लिए काम करने के लिए कुछ और बदलने की ज़रूरत है? मैं इसके लिए एक परीक्षण पृष्ठ बना लिया है:

<html> 
<body> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
<script type="text/javascript"> 

var count = 0; 

$("#update").click(function() { 
    count++; 
    $("#counter").html("My current count is: "+count); 
} 

</script> 
<button id="update" type="button">Button</button> 
<div id="counter">1</div> 
</body> 
</htlm>

स्रोत

2011-01-15 Taimur

* # काउंटर काउंटर * है: क्या यह एक तत्व है जिसमें कोई संख्या है या क्या? –

हाँ, # काउंटर – Taimur

@Taimur के अंदर एक संख्या वाला div है, आपका कोड मान्य नहीं है। अपने क्लिक फ़ंक्शन को '} के साथ समाप्त करें); 'और न केवल'} '। ** डेमो: ** http://jsfiddle.net/marcuswhybrow/Bwdfw/ –

तुम कुछ जो एक चर नहीं है पर ++ उपयोग नहीं कर सकते, यह सबसे करीब होगा आप प्राप्त कर सकते हैं:

$('#counter').html(function(i, val) { return +val+1 });

jQuery के html() विधि तत्व के HTML मान को प्राप्त और सेट कर सकती है। यदि कोई फ़ंक्शन पारित किया गया है तो यह मौजूदा मान के आधार पर HTML को अपडेट कर सकता है। अपने कोड के संदर्भ में तो:

$("#update").click(function() { 
    $('#counter').html(function(i, val) { return +val+1 }); 
}

डेमो:http://jsfiddle.net/marcuswhybrow/zRX2D/2/

इसे अपने डेटाबेस में काउंटर मूल्य के साथ पृष्ठ पर अपने काउंटर का समन्वयन करना, की बात आती है, ग्राहक पर भरोसा कभी नहीं! आप बल्कि 10 के रूप में एक सतत मूल्य इस तरह से, आप सर्वर साइड स्क्रिप्ट के लिए या तो एक वेतन वृद्धि या कमी संकेत भेजने, या 23.

जब आप अपने काउंटर के एचटीएमएल बदल हालांकि आप सर्वर के लिए एक AJAX अनुरोध भेज सकते हैं:

$("#update").click(function() { 
    $('#counter').html(function(i, val) { 
     $.ajax({ 
      url: '/path/to/script/', 
      type: 'POST', 
      data: {increment: true}, 
      success: function() { alert('Request has returned') } 
     }); 
     return +val+1; 
    }); 
}

स्रोत

2011-01-15 18:24:48

यह डेमो चीज़ में ठीक काम करता है, लेकिन किसी कारण से, यह मेरे पृष्ठ पर काम नहीं कर रहा है। वास्तव में, कोई जवाब नहीं हैं! क्या मुझे कुछ याद आ रही है? – Taimur

AJAX चीज़ के संबंध में उत्तर के लिए धन्यवाद, , यह कैसे पता चलता है कि कार्य सफल रहा था या नहीं? इसके अलावा, (i, val) क्या करता है? धन्यवाद – Taimur

@Marcus 'val * 1 + 1' –

$(document).ready(function() { 
var count = 0; 

    $("#update").click(function() { 
    count++; 
    $("#counter").html("My current count is: "+count); 
    } 

}); 

<div id="counter"></div>

स्रोत

2011-01-15 18:24:29 jpea

आप किसी भी jQuery कोड को फायर करने से पहले दस्तावेज़ तैयार फ़ंक्शन जोड़ने की आवश्यकता है (ऊपर संपादित) – jpea

यह सिर्फ

var counter = 0; 

$("#update").click(function() { 
    counter++; 
});

स्रोत

2011-01-15 18:24:55 Vadim

आप "++" एक jQuery तत्व पर स्थापित करने के लिए कोशिश कर रहे हैं है!

आप यह घोषणा कर सकता है एक चर

var counter = 0;

जे एस और jQuery कोड में कार्य करें:

$("#counter").html(counter++);

स्रोत

2011-01-15 18:25:21 stecb

आपको वैश्विक चर बनाना चाहिए? वास्तव में? –

"तुम चाहिए";) नहीं "आप चाहिए" ..it बेहतर होगा "आप कर सकते थे" .. चलो वहाँ यह करने के लिए कई तरीके हैं, मेरा यह सिर्फ एक सुझाव है! – stecb

हां, "आप कर सकते हैं" यहां सही रूप है। सिफारिशों के लिए "आपको चाहिए" है। और किसी को भी वैश्विक चर बनाने की सिफारिश नहीं करनी चाहिए, यहां की सिफारिश विपरीत है: किसी को वैश्विक चर बनाने से बचने की कोशिश करनी चाहिए। –

ऊपर उपयोग वैश्विक चर सुझावों में से कई। यह समस्या के लिए एक अच्छा समाधान नहीं है।गिनती एक तत्व के लिए विशिष्ट है, और आप एक तत्व के लिए डेटा के एक आइटम बाध्य करने के लिए jQuery के data फ़ंक्शन का उपयोग कर सकते हैं:

$('#counter').data('count', 0); 
$('#update').click(function(){ 
    $('#counter').html(function(){ 
     var $this = $(this), 
      count = $this.data('count') + 1; 

     $this.data('count', count); 
     return count; 
    }); 
});

भी ध्यान रखें कि इस html की कॉलबैक सिंटैक्स का उपयोग करता कोड अधिक धाराप्रवाह और तेजी से बनाने के लिए ।

स्रोत

2011-01-15 18:31:44 lonesomeday

सही नहीं हो, तो गिनती – jcuenod

@ j3frea का मूल्य बदल रहा तो एक प्लगइन में कोड संपुटित के एक से अधिक तरीका है। ईमानदारी से, यह करना मुश्किल नहीं है, और वैश्विक चर के साथ अपना कोड कूड़ा करना बहुत खराब डिजाइन है। – lonesomeday

कोई भी वैश्विक चर का उपयोग नहीं कर रहा है, वे केवल उदाहरण हैं। किसी भी उत्तर में संदर्भ नहीं बताया गया है। –

मैं इसे निम्न तरीके से आजमाने की कोशिश कर रहा हूं। मैंने गिनती चर को "ऑनफोकस" फ़ंक्शन के अंदर रखा है ताकि इसे वैश्विक चर बनने से बचाया जा सके। विचार है कि प्रत्येक छवि के लिए टम्बलर ब्लॉग में काउंटर बनाना है।

$(document).ready(function() { 

    $("#image1").onfocus(function() { 

    var count; 

    if (count == undefined || count == "" || count == 0) { 
    var count = 0; 
    } 

    count++; 
    $("#counter1").html("Image Views: " + count); 
    } 
});

फिर, स्क्रिप्ट टैग के बाहर और शरीर में वांछित जगह में मैं जोड़ देंगे:

<div id="counter1"></div>

स्रोत

2013-06-25 21:44:14

नीचे साइट और परीक्षण पर जाएं। http://www.counter12.com/

ऊपर के लिंक से मैं एक डिजाइन है कि मैं अपनी साइट में शर्तों को स्वीकार कर और यह मेरे एक div है कि मैं अपने html पृष्ठ में चिपकाया है दिया है करने के लिए पसंद आया चयन किया है।

यह बेहद काम किया।

मैं JQuery पर आपकी समस्या का उत्तर नहीं दे रहा हूं, लेकिन आपको अपनी समस्या के लिए वैकल्पिक समाधान दे रहा हूं।

स्रोत

2015-07-30 15:13:20 Anil

jQuery - बटन दबाए जाने पर काउंटर के मूल्य को बढ़ाएं

उत्तर

संबंधित मुद्दे