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

コードの問題は、16進値をチェックすることです。ただし、backgroundColorを読み取ると、rgb値が取得されます;-)

于 2013-02-13T10:19:30.463 に答える
0

「クリック」と呼ばれる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 に答える
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が提案するように、クラスとhasClass / addClass / removeClassを使用して改良できます。たとえば、ピンクから黒に変更したい場合は、より柔軟になります。

これは、親要素がgroup-selectdivであることを前提としています。リンクの周りのレイアウトを変更すると、これが壊れることがあり、idを使用してdivを具体的にターゲットにする必要があります-速度のためにここではそのアプローチを採用していません。

于 2013-02-13T11:26:02.297 に答える