Блог

Я пытаюсь изменить значок, отображаемый в заголовке опции ( .option-title ), когда содержимое ниже, например, ( .add_to_rotation ), переключается вверх или вниз. При нажатии вниз должна отображаться кнопка close ( .retract-icon ), а при нажатии вверх должна отображаться add ( .expand-icon ) .

Проблема, я думаю, заключается в задержке с момента slideToggle вызова, пока вызываемое свойство не изменится с display: hidden на display: block и наоборот.

Вот мой код:

 $('.option-title').click( function() {
      var name = $(this).attr('id');
      $('.'   name).slideToggle('slow');
      if($('.'   name).css('display') == "block") {
        $(this).html("Add to Rotation? <div class="retract-icon">");
      } else {
        $(this).html("Add to Rotation? <div class="expand-icon">");
      }
  });
  

Первая часть if() условия выполняется нормально, поэтому условие должно считаться истинным, но при повторном нажатии первое условие по-прежнему считается истинным, и содержимое .option-title не меняется.

Как я мог заставить его работать в соответствии с моим описанием выше?

Буду признателен за любую помощь ;).

Я вижу два простых способа решить эту проблему.

Вместо использования slideToggle сначала определите условие, а затем используйте slideUp или slideDown, которые заставят ваше сообщение отображаться во время выполнения слайда:

 $('.option-title').click( function() {
      var name = $(this).attr('id');
      var slider = $('.'   name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
      if(slider.css('display') == "block") {
            slider.slideUp('slow');
            $(this).html("Add to Rotation? <div class="retract-icon">");
      } else {
            slider.slideDown('slow');
            $(this).html("Add to Rotation? <div class="expand-icon">");
      }
  });
  

Или используйте обратный вызов, который будет означать, что ваше сообщение не появится до завершения слайда:

 $('.option-title').click( function() {
      var name = $(this).attr('id');
      var slider = $('.'   name); // shortcut to the element that's being slid. There's probably a better variable name you can use but I don't know the context
      slider.slideToggle('slow', function() {
        if(slider.css('display') == "block") {
            $(this).html("Add to Rotation? <div class="retract-icon">");
        } else {
            $(this).html("Add to Rotation? <div class="expand-icon">");
        }
      });
  });
  

По крайней мере, часть проблемы может заключаться в том, что вы смешиваете classes и ids .

Вы получаете id здесь

var name = $(this).attr('id');

но затем найдите class здесь

$('.' name).slideToggle('slow');

Не уверен, что это то, что вы пытаетесь сделать.

Если нет, измените $('.' name) на $('#' name)