选择选项时的jquery addClass和removeClass

Question

我有一个选择字段，其中有两个选项。如果选择了一个选项，我想从 div 中添加和删除 Classe！

在 Firefox 上运行良好，而不是在 chrome 和 safari 上

代码如下：

<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
  <option id="privat">Privatperson</option>
  <option id="firma">Firma</option>
</select>

这里是它的 jquery：

$j(document).ready(function() {

    $j("#firma").click(function(){
        $j(".input-company").addClass("show");
        $j(".leweb_button_firma").addClass("hide");
        $j(".leweb_button_privat").removeClass("hide");
    }); 
    $j("#privat").click(function(){
        $j(".input-company").removeClass("show");
        $j(".leweb_button_privat").addClass("hide");
        $j(".leweb_button_firma").removeClass("hide");

    });      

});

Answer 1

$j(document).ready(function() {

  $j("#priv-firma-select").change(function(){
    if($(this).val() == "firma"){
      $j(".input-company").addClass("show");
      $j(".leweb_button_firma").addClass("hide");
      $j(".leweb_button_privat").removeClass("hide");
    }
   else{
      $j(".input-company").removeClass("show");
      $j(".leweb_button_privat").addClass("hide");
      $j(".leweb_button_firma").removeClass("hide");

    }
  }); 
});

Answer 2

问题是因为您将click 事件处理程序添加到option 元素。这没有得到很好的支持。相反，将change 事件处理程序添加到select 并检查所选值。

还请注意，您可以使用带有布尔参数的toggle() 来显示/隐藏元素，而不是添加或删除类。试试这个：

var $j = jQuery.noConflict();

$j("#priv-firma-select").change(function() {
  var val = $j(this).val();
  $j('.input-company, .leweb_button_privat').toggle(val == 'firma');
  $j('.leweb_button_firma').toggle(val != 'firma');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-company">input-company</div>
<div class="leweb_button_firma">leweb_button_firma</div>
<div class="leweb_button_privat">leweb_button_privat</div>

<br /><br />
<label for="priv-firma-select">Bestellen als</label><br />
<select id="priv-firma-select" name="firma-privat">
  <option value="privat">Privatperson</option>
  <option value="firma">Firma</option>
</select>