0

为什么我必须点击两次才能将背景颜色设置为绿色？

这是我的 JavaScript：

function OnGroupClicked(groupId) {
  var groupIds = new Array();
  $("#group-name-" + groupId).on("click", function () {
    var body = $('#group-name-div' + groupId),
    green = "rgb(0, 128, 0)",
    white = "rgb(255, 255, 255)";

    if (body.css("background-color") !== green) {
      $('#hidden' + groupId).val(1);
      body.css("background-color", green);
    } else {
      $('#hidden' + groupId).val(0);
      body.css("background-color", white);
    }
  });
}

这是我的标记：

foreach (var group in Model.AllGroups) {    
    if (Model.GroupsForUser.Any(g => g.GroupId == group.GroupId)) { %>
        <div id="group-name-div<%: group.GroupId %>" style="width:auto; height:50px; border:solid 1px black; margin:5px; background-color:green;" >
            <h3>&nbsp; &nbsp; <a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="group-name-<%: group.GroupId %>"><%: group.Name %></a></h3> 
        </div>
        <input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden<%: group.GroupId %>" value="" />
    <% } else { %>
        <div id="group-name-div<%: group.GroupId %>" style="width:auto; height:50px; border:solid 1px black; margin:5px;" >
            <h3>&nbsp; &nbsp; <a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="group-name-<%: group.GroupId %>"><%: group.Name %></a></h3> 
        </div>
        <input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden-<%: group.GroupId %>" value="" />
    <% }
} %>
4

1 回答 1

2

您首先在第一次单击时声明事件处理程序，而不是触发它。

为了进一步解释，当您单击运行该OnGroupClicked函数的链接时，这会添加事件侦听器，但不会触发它。

要解决此问题，请将事件附加到元素上，并使用它this来了解单击了哪个元素。

你可以这样做：

$(".changeColor").on("click", function () {
 var body = $(this).closest('group-name-div'),
     green = "rgb(0, 128, 0)",
     white = "rgb(255, 255, 255)";

 if (body.css("background-color") !== green) {
   body.next('input').val(1);
   body.css("background-color", green);
 } else {
   body.next('input').val(0);
   body.css("background-color", white);
 }
});

MVC 标记：

<div class="group-name-div" id="group-name-div<%: group.GroupId %>">
  <h3><a href="#" class="changeColor"><%: group.Name %></a></h3> 
</div>
<input type="hidden" id="hidden<%: group.GroupId %>" name="group-hidden<%: group.GroupId %>" value="" />

您不需要整个功能。

于 2013-02-22T13:37:27.600 回答