Question

为什么在背景颜色设置为绿色之前必须单击两次？

这是我的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="" />
    <% }
} %>

Answer 1

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

要进一步说明，当您单击链接运行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="" />

你不需要整个功能。

Onclick事件需要点击两次？

1 个答案: