Question

我有一个asp.net应用程序。我正在使用jquery ajax调用从服务器端检索数据并显示它。

这是我的代码，

<div>
   <table class="window_month" style="margin-top: 15px; text-align: center;">
      <tr id="NavigationMonth">
          <td id="mo1" runat="server" onclick="">
            Jan
          </td>
          <td id="mo2" runat="server" onclick="">
            Feb
          </td>
          <td id="mo3" runat="server" onclick="">
            Mar
          </td>                                
      </tr>
   </table>
</div>

<script type="text/javascript">
  $('.window_month td').on('click', function() {
    var ddl = $("#ddlYear option:selected").text();
    var idName = this.id;
    var selectedid = idName.substring(2);

    var param = {
        month: selectedid,
        year: ddl
    };

    var strParam = JSON.stringify(param);

    $.ajax({
        type: "POST",
        url: "Default.aspx/GetSelectedTDData",
        contentType: "application/json;",
        data: strParam,
        async: false,
        dataType: "json",
        success: function (result) {
            alert('Yay! It worked!');
            var response = result.d;
            $('#lblValid').text(response[0]);
            $('#lblNotValid').text(response[1]);
            $('#mo' + selectedid).css('backgroundColor', '#aaa');
        },
        error: function (result) {
            alert('Oh no :(');
        }
    });
});
</script>

上面的代码突出显示了被点击的html td元素，但是当我点击另一个td元素时，它应该忘记最后点击的元素并突出显示一个新元素。

目前它不会忘记最后点击的元素。我怎么能这样做？

Answer 1

试试这个，您应该从所有td中删除背景，然后将其添加到刚刚单击的td

 $('.window_month td').css('backgroundColor', 'non highlighted color code');
 $('#mo' + selectedid).css('backgroundColor', '#aaa');

Answer 2

已经完成。

for (var i = 1; i <= 12; i++) {
    if (i == selectedid) {
       $('#mo' + selectedid).css('backgroundColor', '#aaa');
    }
    else {
       $('#mo' + i).css('backgroundColor', '#f5f5f5');
    }
}

如何在jquery ajax成功事件中应用不同的CSS样式？

2 个答案: