使用jquery切换事件jquery切换投票?

发布于 2024-09-27 07:38:52 字数 1360 浏览 0 评论 0原文

我的这个脚本运行良好,允许用户投票,但我知道如何制作投票按钮,再次单击时它会切换回正常图像!就像 stackoverflow:

这是我的脚本:

$(document).ready(function() {
    $('.statuses').delegate('.vote_up', 'click', function(e) {

        //stop event
        e.preventDefault();
       //get the id
        var the_id = $(this).closest('.message').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            context: this,
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked

            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {

                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/uparrowActive.png");
            }
        });
    });

html:

<ul class="statuses">
<li id="set_41" class="message">
 <span class="vote_count">0</span>
 <a href="#" class="vote_up"><img src="img/uparrow.png" /></a>

这是我想要发生的伪语言:

a user clicks vote image, it changes the image(uparrowActive)
//I've done that already
then
if user clicks the same image again it goes back to normal image(uparrow)

I have got this script that works fine, that allows a user to vote, but I'm kind of stuff of how I can make the vote button, when clicked again it toggle back to normal image! just like stackoverflow:

this is my script:

$(document).ready(function() {
    $('.statuses').delegate('.vote_up', 'click', function(e) {

        //stop event
        e.preventDefault();
       //get the id
        var the_id = $(this).closest('.message').attr('id').split('_').pop();
        //the main ajax request
        $.ajax({
            context: this,
            type: "POST",
              // Make sure "this" in the callback refers to the element clicked

            data: "action=vote_up&id=" + the_id,
            url: "ajax/votes.php",
            success: function (msg) {

                $(this).siblings("span.vote_count").html(msg).fadeIn();
                  // get the child <img> and set its src
                $(this).children("img").attr("src", "img/uparrowActive.png");
            }
        });
    });

html:

<ul class="statuses">
<li id="set_41" class="message">
 <span class="vote_count">0</span>
 <a href="#" class="vote_up"><img src="img/uparrow.png" /></a>

this is the pseudo language that I want to happen:

a user clicks vote image, it changes the image(uparrowActive)
//I've done that already
then
if user clicks the same image again it goes back to normal image(uparrow)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

花间憩 2024-10-04 07:38:52

jquery 有一个切换事件,它允许您将两个事件处理程序绑定到交替调用的元素。

*未经测试,可能有简单的语法错误。

myElement.toggle(vote(), unvote());

function vote()
{
   // add a vote to the item
   // change icon to vote icon
}

function unvote()
{
  // remove a vote from the item
  // change icon to default icon.
}

jquery has a toggle event that allows you to bind two event handlers to an element that are called alternately.

*untested, probably has simple syntax errors.

myElement.toggle(vote(), unvote());

function vote()
{
   // add a vote to the item
   // change icon to vote icon
}

function unvote()
{
  // remove a vote from the item
  // change icon to default icon.
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文