0

背景色を緑に設定する前に 2 回クリックする必要があるのはなぜですか?

これは私の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 に答える