☰

jQueryで要素のクラスを変更するにはどうすればいいですか？> 質問する

tag-icon • tag-icon javascript html jquery
jQueryで要素のクラスを変更するにはどうすればいいですか？> 質問する

次のような JavaScript 関数があります。

function UpdateFilterView() {
  if (_extraFilterExists) {
    if ($('#F_ShowF').val() == 1) {
      $('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
      $('#extraFilterDropDownButton').css("display", "block");
      if ($('#divCategoryFilter').css("display") == 'none') {
        $('#divCategoryFilter').show('slow');
      }
      return;
    } else {
      if ($('#divCategoryFilter').css("display") == 'block') {
        $('#divCategoryFilter').hide('slow');
      }

      $('#extraFilterDropDownButton').css("display", "block");
      $('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
      return;
    }
  } else {
    if ($('#divCategoryFilter').css("display") != 'none') {
      $('#divCategoryFilter').hide('fast');
    }
    $('#extraFilterDropDownButton').css("display", "none");
  }
}

これは、次のコードによってトリガーされます ( 内から$(document).ready(function () {}))。

$('#extraFilterDropDownButton').click(function() {
    if ($('#F_ShowF').val() == 1) {
        $('#F_ShowF').val(0);
    } else {
        $('#F_ShowF').val(1);
    }

    UpdateFilterView();
});

この HTML は簡単です:

<div id="divCategoryFilter">...</div> 
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down">&nbsp;</div>

これには2つの問題があります:

  1. パネルが非表示のときに div ボタン ( extraFilterDropDownButton) を押すと、ページの左上部分がちらつき、その後パネルが下方向にアニメーション表示されます。

  2. パネルが表示され、div ボタンを押すとパネルは表示されますがhide('slow')、スクリプトで設定してもボタンは正しいクラスに変更されませんUpdateFilterView。

ボタンにマウスを移動すると、正しいクラスがボタンに設定されます。これは次のコードで設定されます。

$("#extraFilterDropDownButton").hover(function() {
    if ($('#divCategoryFilter').css("display") == 'block') {
      $(this).attr('class', 'showhideExtra_up_hover');
    } else {
      $(this).attr('class', 'showhideExtra_down_hover');
    }
  },
  function() {
    if ($('#divCategoryFilter').css("display") == 'block') {
      $(this).attr('class', 'showhideExtra_up');
    } else {
      $(this).attr('class', 'showhideExtra_down');
    }
  });

ベストアンサー1

クラスを追加または削除するのではなく、クラスを完全に設定するには、次のようにします。

$(this).attr("class","newclass");

これの利点は、そこに設定されている可能性のあるクラスをすべて削除し、好みに合わせてリセットできることです。少なくとも、これは 1 つの状況では機能しました。

おすすめ記事