javascript - 选择一个选项时的 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

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

另请注意，您可以使用带有 bool 参数的 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>