点击链接时，无法实现 div 在两种颜色之间切换的效果。

Question

点击链接时，无法实现 div 在两种颜色之间切换的效果。

3

我有这个链接：

<div id='up_arrow_div'> 
<%= link_to "&uArr;".html_safe, video_votes_path( :video_id => video.id, :type => "up" ), :method => :post, :remote => true, :class => 'up_arrow' %>
</div>

还有一个“down vote”按钮，它会发送一个POST请求并将投票插入数据库中。我正在尝试设置样式，使其在单击时更改颜色。以下是初始CSS：

a.up_arrow:link, a.down_arrow:link {
color: black;
text-decoration: none;  
font-size: 25px;
margin-left: 7px;
}

#up_arrow_div, #down_arrow_div {
display:block;
background-color:#DFEAF4;
width:30px;
}

CSS会在箭头形状的链接周围创建一个带有彩色正方形的div。然后我有这个jQuery代码：

$('a.up_arrow').toggle(function () {
    $('#up_arrow_div').css("background-color", "#19558D");
     }, function () {
        $('#up_arrow_div').css("background-color", "#E9DEDE;"); 
 });

 $('a.down_arrow').toggle(function() {
     $('#down_arrow_div').css("background-color", "#19558D");
 }, function () {
         $('#down_arrow_div').css("background-color", "#E9DEDE;");  
 });

这好像并不起作用。首先，投票变得无效了。另外，div的颜色改变了一次，但是再次点击它时没有改回来。我做错了什么，怎么解决呢？

更新：

根据要求，这里是生成的HTML标记：

<div id="voting_div">
  <div id="up_arrow_div">   
  <a href="/video_votes?type=up&amp;video_id=448" class="up_arrow" data-method="post" data-remote="true" rel="nofollow">⇑</a>
  </div>
  <div id="vote_display">
    <p id="votes">0 Votes</p>
  </div>
  <div id="down_arrow_div">
  <a href="/video_votes?type=down&amp;video_id=448" class="down_arrow" data-method="post" data-remote="true" rel="nofollow">⇓</a>
  </div>
</div>

更新2：

这是我现在正在使用的JS代码，如下面的答案所解释的：

    var toggleVoting = function() {
        if ($(this).parent().hasClass("voted")) {
            return "unvoted";
        }
        else {
            return "voted";
        }
    };

    $('a.up_arrow').click(function() {
        $(this).parent().toggleClass(toggleVoting);
    });

    $('a.down_arrow').click(function() {
        $(this).parent().toggleClass(toggleVoting);
    });

这段代码的行为是当我投票时，div元素会被添加类名为“voted”的class属性，当我再次投票时，“voted”类将被移除，但“unvoted”类不会被添加。我需要在移除“voted”类时添加“unvoted”类。

- Justin Meltzer

1

你能包含生成的HTML标记吗？我无法“阅读”Ruby代码。 - Marcel Korpel

是的，刚刚编辑了问题的细节。 - Justin Meltzer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Whitaker · Accepted Answer

在第二个切换函数的每个选择器中，从传递给.css()的颜色中删除分号(;)（使用#E9DEDE代替#E9DEDE;）：

$('a.up_arrow').toggle(function () {
    $('#up_arrow_div').css("background-color", "#19558D");
     }, function () {
        $('#up_arrow_div').css("background-color", "#E9DEDE"); 
 });

 $('a.down_arrow').toggle(function() {
     $('#down_arrow_div').css("background-color", "#19558D");
 }, function () {
         $('#down_arrow_div').css("background-color", "#E9DEDE");  
 });

更新：正如您所指出的，当应用toggle()代码时，链接将不会被跟踪。这是因为jQuery在执行该函数时取消了链接的默认操作。为了解决这个问题，您可以编写自己的代码，使用toggleClass()代替：

JavaScript：

var toggleVoting = function() {
    if ($(this).hasClass("voted")) {
        return "unvoted";
    }
    else {
        return "voted";
    }
};

$('a.up_arrow').click(function() {
    $("#up_arrow_div").toggleClass(toggleVoting);
});

$('a.down_arrow').click(function() {
    $("#down_arrow_div").toggleClass(toggleVoting);
});

CSS:

.voted { background-color: #19558D; }
.unvoted { background-color: #E9DEDE; }

更新2：要删除voted / unvoted：

var toggleVoting = function() {
    var $this = $(this);

    if ($this.hasClass("voted")) {
        $this.removeClass("voted");
        return "unvoted";
    }
    else {
        $this.removeClass("unvoted");
        return "voted";
    }
};

根据下面的评论更新3：

var toggleVoting = function() {
    var $this = $(this);

    if ($this.hasClass("voted")) {
        $this.removeClass("voted");
        return "unvoted";
    }
    else {
        $this.removeClass("unvoted");
        return "voted";
    }
};

$('a.up_arrow').click(function(e) {
    e.preventDefault();
    var $downArrow = $("#down_arrow_div");
    if ($downArrow.hasClass("voted")) {
        $downArrow.addClass("unvoted").removeClass("voted");
    }
    $("#up_arrow_div").toggleClass(toggleVoting);
});

$('a.down_arrow').click(function(e) {
    e.preventDefault();
    var $upArrow = $("#up_arrow_div");
    if ($upArrow.hasClass("voted")) {
        $upArrow.addClass("unvoted").removeClass("voted");
    }
    $("#down_arrow_div").toggleClass(toggleVoting);    
});

这是一个可用的示例： http://jsfiddle.net/andrewwhitaker/QuA2K/2/