jQuery - Tăng giá trị bộ đếm khi nút được nhấp vào

Tôi đang tạo một hệ thống trong đó người dùng nhấp vào nút và số điểm của họ tăng lên. Có một truy cập mà tôi muốn tăng giá trị của việc sử dụng jQuery (để trang không cần phải làm mới) khi nút được nhấp.jQuery - Tăng giá trị bộ đếm khi nút được nhấp vào

Tôi sẽ làm như thế nào?

<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>

#update là nút, #counter là bộ đếm.

Trong php, ++ tăng giá trị của một cái gì đó. Tương đương jQuery là gì?

Ngoài ra, khi nút được nhấp, nó cần gửi yêu cầu cập nhật giá trị điểm số trong cơ sở dữ liệu mysql, mà không cần làm mới trang. Có ai biết làm thế nào tôi sẽ làm điều đó?

Thanks a lot

UPDATE:

Tôi đã thử một vài trong số các phương thức dưới đây, nhưng không có vẻ làm việc! Tôi có cần thay đổi bất kỳ thứ gì khác để nó hoạt động không? Tôi đã tạo một trang kiểm tra cho nó:

<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>

Nguồn

2011-01-15 Taimur

* # truy cập là bộ đếm *: Có phải đó là một phần tử có chứa một số hay không? –

vâng, #counter là div có số bên trong – Taimur

@Từ chối mã của bạn không hợp lệ. Kết thúc hàm click của bạn với '});' và không chỉ '}'. ** DEMO: ** http://jsfiddle.net/marcuswhybrow/Bwdfw/ –

Bạn không thể sử dụng ++ trên một cái gì đó mà không phải là một biến, đây sẽ là gần nhất bạn có thể nhận được:

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

jQuery html() phương thức có thể nhận và đặt giá trị HTML của một phần tử. Nếu thông qua một hàm, nó có thể cập nhật HTML dựa trên giá trị hiện tại. Vì vậy, trong bối cảnh của mã của bạn:

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

DEMO:http://jsfiddle.net/marcuswhybrow/zRX2D/2/

Khi nói đến việc đồng bộ hóa truy cập của bạn trên trang web, với giá trị truy cập trong database của bạn, bao giờ tin tưởng cho khách hàng! Bạn gửi tín hiệu tăng hoặc giảm cho tập lệnh phía máy chủ, thay vì giá trị liên tục như 10 hoặc 23.

Tuy nhiên, bạn có thể gửi yêu cầu AJAX tới máy chủ khi thay đổi mã HTML của bộ đếm:

$("#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; 
    }); 
}

Nguồn

2011-01-15 18:24:48

Điều này hoạt động tốt trong bản trình diễn, nhưng vì một số lý do, nó không hoạt động trên trang của tôi. Trong thực tế, không có câu trả lời là! Có điều gì tôi thiếu không? – Taimur

Cảm ơn bạn đã trả lời, liên quan đến điều AJAX, làm cách nào để biết liệu chức năng có thành công hay không? Ngoài ra, những gì hiện (i, val) làm gì? Cảm ơn – Taimur

@Marcus Hãy xem xét '+ val + 1' thay vì' val * 1 + 1' –

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

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

}); 

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

Nguồn

2011-01-15 18:24:29 jpea

bạn cần thêm chức năng sẵn sàng của tài liệu trước khi kích hoạt bất kỳ mã jQuery nào (chỉnh sửa ở trên) – jpea

Nó chỉ

var counter = 0; 

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

Nguồn

2011-01-15 18:24:55 Vadim

Bạn đang cố gắng để thiết lập "++" trên một yếu tố jQuery!

Bạn có thể khai báo một biến js

var counter = 0;

và trong mã jQuery làm:

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

Nguồn

2011-01-15 18:25:21 stecb

Bạn nên tạo một biến toàn cầu? Có thật không? –

"Bạn NÊN";) không phải "bạn PHẢI" .. nó sẽ tốt hơn "bạn có thể" .. c'mon có một số cách để làm điều này, tôi chỉ là một gợi ý! – stecb

Có, "bạn có thể" là biểu mẫu chính xác tại đây. "Bạn nên" là cho các khuyến nghị. Và không ai nên khuyên bạn nên tạo các biến toàn cầu, đề xuất ở đây là ngược lại: người ta nên cố gắng tránh tạo các biến toàn cầu. –

Một số gợi ý ở trên sử dụng các biến toàn cục. Đây không phải là giải pháp tốt cho vấn đề.Số đếm là cụ thể cho một yếu tố, và bạn có thể sử dụng data chức năng của jQuery để ràng buộc một mục dữ liệu đến một phần tử:

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

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

Cũng lưu ý rằng đây sử dụng cú pháp callback của html để làm cho mã thông thạo hơn và nhanh chóng .

Nguồn

2011-01-15 18:31:44 lonesomeday

Không đúng nếu có nhiều cách thay đổi giá trị của số – jcuenod

@ j3frea Sau đó đóng gói mã trong một plugin. Thành thật mà nói, điều này không phải là khó để làm, và xả rác mã của bạn với các biến toàn cầu là thiết kế rất xấu. – lonesomeday

Không ai đang sử dụng các biến toàn cục, chúng chỉ là các ví dụ. Ngữ cảnh không được nêu trong bất kỳ câu trả lời nào. –

Tôi sẽ thử cách này theo cách sau. Tôi đã đặt biến số đếm bên trong hàm "onfocus" để giữ cho biến trở thành biến toàn cục. Ý tưởng là tạo một bộ đếm cho mỗi hình ảnh trong một blog tumblr.

$(document).ready(function() { 

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

    var count; 

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

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

Sau đó, bên ngoài các thẻ script và tại địa điểm mong muốn trong cơ thể tôi sẽ thêm:

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

Nguồn

2013-06-25 21:44:14

Tới trang web dưới đây và tryout. http://www.counter12.com/

Từ liên kết ở trên, tôi đã chọn một thiết kế mà tôi thích có trong trang web của mình chấp nhận các điều khoản và nó đã cho tôi một div mà tôi đã dán trong trang html của tôi.

Nó đã hoạt động rất tốt.

Tôi không trả lời cho vấn đề của bạn trên JQuery, nhưng cung cấp cho bạn giải pháp thay thế cho vấn đề của bạn.

Nguồn

2015-07-30 15:13:20 Anil

jQuery - Tăng giá trị bộ đếm khi nút được nhấp vào

Trả lời

Các vấn đề liên quan