縮短或簡化jQuery邏輯

是否有任何可能的方法縮短以下代碼段的jQuery？縮短或簡化jQuery邏輯

我可能需要重複使用相同的邏輯爲其他8個選擇框。非常感謝。

代碼

$('#select_client').on('change', function() { 
 
    var val = this.value; 
 

 
    /* Possible to shorten this section? I have more cases like this */ 
 
    if (val == 'OTHER') { 
 
    $('#input_client').addClass('show'); 
 
    $('#input_client').removeClass('hide'); 
 
    $('#input_client').val(''); 
 
    $('#input_client').focus(); 
 
    } else { 
 
    $('#input_client').addClass('hide'); 
 
    $('#input_client').removeClass('show'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select class="form-control" id="select_client" name="select_client"> 
 
    \t <option value="1">Company A</option> 
 
    \t <option value="2">Company A</option> 
 
    \t <option value="3">Company A</option> 
 
    \t <option value="4">Company A</option> 
 
    \t <option value="OTHER">Other</option> 
 
    </select> 
 
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

來源

2017-10-06 4 Leave Cover

創建一個功能，通過它你'val'變量，這樣你就可以調用它，無論你想一個線;） – Walk

請儘量將

$('#select_client').on('change', function() { 
     var val = this.value; 

     /* Possible to shorten this section? I have more cases like this */ 
     if(val=='OTHER'){ 
      $('#input_client').addClass('show').removeClass('hide').val('').focus(); 

     } else { 
      $('#input_client').addClass('hide').removeClass('show'); 

     } 
    })

來源

2017-10-06 10:43:20 Pritamkumar

您可以通過定義進一步簡化CSS以「show」（或「hide」）是*默認狀態*的方式，那麼你只需要使用'show'或'hide'，而不是兩者。當你有這樣的「布爾」狀態（即兩個選項，互斥）時，你通常應該以這種方式工作。 –

$('#select_client').on('change', function() { 
    $input = $('#input_client') 
     .toggleClass('show',$(this).val() ==='OTHER') 
     .removeClass('hide',$(this).val() !=='OTHER'); 

    if($(this).val()==='OTHER'){ 
     $input.val('').focus(); 
    } 
});

這是短...你可以加一些條件，使其工作與multipl相同的功能e選擇輸入對;）

來源

2017-10-06 10:48:32

由於您使用的是jQuery，因此可以鏈接函數以減少鍵入選擇器的冗餘。

如果您希望根據條件添加/刪除課程，還可以查看.toggleClass。

另外，您可以將它保存在一個變量中，並在任何地方使用此變量，而不是一次又一次地獲取元素。

$('#select_client').on('change', function() { 
 
    var valid = this.value === 'OTHER'; 
 
    var $input = $('#input_client'); 
 

 
    $input 
 
    .toggleClass('show', valid) 
 
    .toggleClass('hide', !valid); 
 
    if (valid) { 
 
    $input 
 
     .val('') 
 
     .focus(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select class="form-control" id="select_client" name="select_client"> 
 
    <option value="1">Company A</option> 
 
    <option value="2">Company A</option> 
 
    <option value="3">Company A</option> 
 
    <option value="4">Company A</option> 
 
    <option value="OTHER">Other</option> 
 
</select> 
 
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

來源

2017-10-06 10:48:49 Rajesh

你可以使用.toggle切換根據條件語句中你的輸入的顯示。

另外，如果你打算有多個選擇和輸入框，你應該使用類而不是id。

如果您的網頁中有相同的多個元素，則定位id在這裏不是一個好主意。

在下面的例子中，我使用.input_client類作爲選擇器。

$('#select_client').on('change', function() { 
 
    var val = this.value; 
 

 
    /* Possible to shorten this section? I have more cases like this */ 
 
    if (val == 'OTHER') { 
 
    $(this).next(".input_client").toggle("display"); 
 
    $(this).next(".input_client").val(''); 
 
    $(this).next(".input_client").focus(); 
 
    } 
 
})

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select class="form-control" id="select_client" name="select_client"> 
 
    <option value="1">Company A</option> 
 
    <option value="2">Company A</option> 
 
    <option value="3">Company A</option> 
 
    <option value="4">Company A</option> 
 
    <option value="OTHER">Other</option> 
 
</select> 
 
<input id="input_client" type="text" class="input_client form-control hide" placeholder="Please provide Client name" />

來源

2017-10-06 10:48:52 bhansa

縮短或簡化jQuery邏輯

回答

相關問題