Question

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

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

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

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

感谢

Answer 1

你可以这样做：

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

您的代码存在的问题是，您检查十六进制值。但是如果你读了backgroundColor，你将获得rgb值; - ）

Answer 2

为什么不创建名为“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")
  }
}

Answer 3

您需要做的是找到包含每个链接的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建议的类和hasClass / addClass / removeClass来改进它 - 如果你想从粉红色变成黑色，那就更灵活了。

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

如何在单击链接内部时更改div背景颜色

3 个答案: