Question

我想更改图标，使其与slideDown和slideUp一起使用。
该图标随着滑动效果消失，但没有显示。

有人知道错误在哪里吗，或者是否有其他方法可以实施我的计划？最后，我要像其他表单一样更改此表单的图标：

当前的HTML代码：

$("#recipient").on('hange', function() {
  let value = $("#recipient option:selected").val();
  if (value) {
    let target = $('#' + value);

    target.slideDown();
    target.siblings('.form-hide').slideUp();

    if (value === 'contact') {
      $("#recipient-icon").slideUp("fast", function() {
        $("#recipient-icon").removeClass();
      }).slideDown("fast", function() {
        $("#recipient-icon").addClass("fas fa-comments fa-fw");
      });
    } else if (value === 'webmaster') {
      $("#recipient-icon").slideUp("fast", function() {
        $("#recipient-icon").removeClass();
      }).slideDown("fast", function() {
        $("#recipient-icon").addClass("fas fa-code fa-fw");
      });
    } else if (value === 'uploader') {
      $("#recipient-icon").slideUp("fast", function() {
        $("#recipient-icon").removeClass();
      }).slideDown("fast", function() {
        $("#recipient-icon").addClass("fas fa-file-upload fa-fw");
      });
    } else if (value === 'support') {
      $("#recipient-icon").slideUp("fast", function() {
        $("#recipient-icon").removeClass();
      }).slideDown("fast", function() {
        $("#recipient-icon").addClass("fas fa-medkit fa-fw");
      });
    } else if (value === 'issues') {
      $("#recipient-icon").slideUp("fast", function() {
        $("#recipient-icon").removeClass();
      }).slideDown("fast", function() {
        $("#recipient-icon").addClass("fas fa-bug fa-fw");
      });
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mx-500">
  <h1 class="sr-only">Kontakt</h1>
  <div class="card-header">
    <label for="recipient" class="sr-only">Empfänger</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" style="width: 46px;">
          <i class="fas fa-question-circle fa-fw" id="recipient-icon"></i>
        </span>
      </div>
      <select class="custom-select" name="recipient" id="recipient" size="1" required>
        <option class="d-none" value="">Empfänger wählen</option>
        <option value="contact" {{contact}}>Allgemeine Kontaktanfrage</option>
        <option value="webmaster" {{webmaster}}>Kontakt mit dem Webmaster</option>
        <option value="uploader" {{uploader}}>Eigene Patches anbieten</option>
        <option value="support">Support</option>
        <option value="issues">Homepage Issue- &amp; Wishes-Tracker</option>
      </select>
    </div>
  </div>
  <form action="{{REQUEST_URI}}" method="post" class="form-hide d-none" id="contact">
    <!--
    contact Form
    -->
  </form>
  <form action="{{REQUEST_URI}}" method="post" class="form-hide d-none" id="webmaster">
    <!--
    webmaster Form
    -->
  </form>
  <form action="{{REQUEST_URI}}" method="post" class="form-hide d-none" id="uploader">
    <!--
    uploader Form
    -->
  </form>
  <div class="card-body form-hide d-none text-center" id="issues">
    <!--
    issues Form
    -->
  </div>
  <div class="card-body form-hide d-none text-center" id="support">
    <!--
    support Form
    -->
  </div>

现在一切正常，我将“ keyup change”作为事件，而不仅仅是“ change”，所以当您使用箭头键进行更改时，动画当然会翻倍。

感谢您的帮助

Answer 1

只需在slideDown之前添加类

Codepen

$("#recipient-icon").slideUp("fast",function(){
  $("#recipient-icon").removeClass().addClass("fas fa-bug fa-fw");
});
$("#recipient-icon").slideDown("fast");

Answer 2

您的代码正在等待元素完成向下滑动，然后才能更改图标。由于所有类在向上滑动结束时都已删除，因此当向下滑动时，将看不到任何图标。然后，在向下滑动后再次添加类时，该图标就会出现。

.slideDown（[持续时间] [，完成]）

尝试在元素向上滑动后更改图标。
例如：

$("#recipient-icon").slideUp("fast", function() {
  $(this).removeClass().addClass("fas fa-comments fa-fw");
}).slideDown("fast");

为了提高效率，我建议使用data attribute为每个<option>定义图标。
这样您就可以删除很多重复的代码（请参见DRY）。

例如：

<option value="contact" data-icon="comments">Allgemeine Kontaktanfrage</option>

let icon = $(':selected', $recipientSelect).data('icon');
$recipientIcon.removeClass().addClass("fas fa-" + icon + " fa-fw");

其他建议：

删除keyup事件，因为change就足够了。
使用stop()防止排队jQuery动画。

这是一个工作示范：

let $recipientSelect = $('#recipient');
let $recipientIcon = $('#recipient-icon');

$recipientSelect.on('change', function() {

  let value = $recipientSelect.val();
  let icon = $(':selected', $recipientSelect).data('icon');

  if (value) {
    let $target = $('#' + value);
    $target.slideDown();
    $target.siblings('.form-hide').slideUp();
  }

  if (icon) {
    $recipientIcon.stop(true, true).slideUp("fast", function() {
      $recipientIcon.removeClass().addClass("fas fa-" + icon + " fa-fw");
    }).slideDown("fast");
  }

});

.form-hide {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card-header">
  <label for="recipient" class="sr-only">Empfänger</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
          <i class="fas fa-question-circle fa-fw" id="recipient-icon"></i>
        </span>
    </div>
    <select class="custom-select" name="recipient" id="recipient" size="1" required>
      <option class="d-none" value="">Empfänger wählen</option>
      <option value="contact" data-icon="comments">Allgemeine Kontaktanfrage</option>
      <option value="webmaster" data-icon="code">Kontakt mit dem Webmaster</option>
      <option value="uploader" data-icon="file-upload">Eigene Patches anbieten</option>
      <option value="support" data-icon="medkit">Support</option>
      <option value="issues" data-icon="bug">Homepage Issue- &amp; Wishes-Tracker</option>
    </select>
  </div>
</div>
<form action="" method="post" class="form-hide d-none" id="contact">
  contact Form
</form>
<form action="" method="post" class="form-hide d-none" id="webmaster">
  webmaster Form
</form>
<form action="" method="post" class="form-hide d-none" id="uploader">
  uploader Form
</form>
<div class="card-body form-hide d-none text-center" id="issues">
  issues Form
</div>
<div class="card-body form-hide d-none text-center" id="support">
  support Form
</div>

Answer 3

 $('.slide-content').hide();
  $('.slide-header').click(function() {       
    $('.slide-content').slideToggle(460);  
    if($('.slide-header i').hasClass('fa fa-minus')){
      $('.slide-header i').removeClass().addClass('fa fa-plus');
    } else {
      $('.slide-header i').removeClass().addClass('fa fa-minus');
    }
  })

.slideDiv {
  border: 1px solid #ccc;
  padding: 0;
  margin: 50px 0;
}

.slide-header {
  display: flex;
  align-items: center;  
  background: #ddd;
  padding: 5px 10px;
}

.slide-header>a {  
  flex:0.95;
  text-transform: capitalize;
  color: #000;
}

.slide-content {
  padding: 5px 10px;  
 
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5 slideDiv">
    <div class="slide-header">
      <a href="#FIXME" class="d-block">
        slideMe
      </a>
      <span>
        <i class="fa fa-plus" aria-hidden="true"></i>
      </span>
    </div>
    <div class="slide-content">
      <p>Eiusmod nostrud voluptate ex id consectetur deserunt. Et occaecat cupidatat quis ad sit sint. Quis enim velit esse consequat occaecat labore nostrud laboris anim nulla. Aliquip consequat id Lorem consequat esse non irure deserunt officia officia ad. Est voluptate eiusmod cupidatat elit mollit.</p>
    </div>
  </div>

通过带有SlideDown和SlideUp的JQuery更改图标

3 个答案: