0

单击链接时如何将背景颜色更改为绿色并保持绿色，直到我再次单击链接然后颜色必须为白色

到目前为止我有这个代码：

    <% foreach (var group in Model.Results)
       { %>       

         <div id="group-select<%: group.GroupId %>" style="width:95%; height:50px; border:solid 1px black; margin:5px;" >
            <h3><a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="changer<%: group.GroupId %>"  ><%: group.Name %></a></h3> 
         </div>

    <% } %>

和JS：

<script type="text/javascript">   
function OnGroupClicked(groupId) {
  $("#changer" + groupId).on("click", function (e) {
    e.preventDefault();
    var body = $('#group-select' + groupId),
        green = "rgb(0, 128, 0)",
        white = "rgb(255, 255, 255)";

    if (body.css("backgroundColor") !== green) {
      body.css("backgroundColor", green);
    } else {
      body.css("backgroundColor", white);
    }
  });
}
</script>

有人能帮助我吗？绿色将显示选择了特定组，而当它为白色时，则未选择。因此，当页面首次加载时，它将是白色的。我点击它，它是绿色的并保持绿色，直到我再次点击它。

谢谢

4

3 回答 3

1

你可以这样做：

http://jsbin.com/evupih/1/edit

您的代码的问题是，您检查十六进制值。但是如果您阅读背景颜色，您将获得 rgb 值 ;-)

于 2013-02-13T10:19:30.463 回答
0

您需要做的是找到包含每个链接的 div：

$(function(){
  $("#changer").on("click",function(e){
    e.preventDefault();
    var target = $(this).parent(),
        green = "rgb(0, 128, 0)",
        white = "rgb(255, 255, 255)";

    if(target.css("backgroundColor") !== green){
      target.css("backgroundColor", green);
    }else{
      target.css("backgroundColor", white);
    }

  });
});

一旦这个工作正常，您可以按照@jimmy 的建议使用 classes 和 hasClass/addClass/removeClass 来改进它 - 如果您想从粉红色变为黑色，那么这种方式会更加灵活。

这假定父元素是 group-select div。如果您更改链接周围的布局，这可能会中断，您需要使用 id 专门针对 div - 我在这里没有采用这种方法来提高速度。

于 2013-02-13T11:26:02.297 回答
0

为什么不创建一个名为“clicked”的 CSS 类，例如：

.clicked{background-color:#00CC00}

然后做：

<script type="text/javascript">
function OnGroupClicked(groupId)
{
  if ($("#ColorHidden" + groupId).hasClass("clicked")) {
    $("#ColorHidden" + groupId).removeClass("clicked")
  } else {
    $("#ColorHidden" + groupId).addClass("clicked")
  }
}
于 2013-02-13T10:05:35.207 回答