優化添加新的選項來選擇jQuery的

Question

這裏重複代碼是我的提琴：添加新的選項，以排除和事件類別選擇DEMO

我已經重複碼。我如何優化相同的消除重複的代碼？

//Adding new category for event 
$(document).on('click', '.addevent', function() { 

    var found = false; // Track if new value was found in list   
    // Loop through list options 
    $("#categoryevent > option").each(function(idx, el) { 
    // Compare (case-insensitive) new value against list values 
    if ($("#new-option-event").val().trim().toLowerCase() === el.textContent.toLowerCase()) { 
     alert("Category already exists!") 
     found = true; // Set flag if value exists 
     $('#new-option-event').val(''); 
    } 
    }); 
    // If not found 
    if ($('#new-option-event').val().trim() != '') { 
    if (!found) { 
     // Create new option and append to list 
     var val = $("#new-option-event").val().trim(); 
     var opt = '<option>' + val + '</option>'; 
     $('#categoryevent').append(opt); 
     $('#categoryevent').val(val); 
     $('#new-option-event').val(''); 
     $("#categoryevent").click(); 
    } 
    } 

}); 

Answer 1

在這裏你去 - 一個共同的功能有很大幫助：

//Adding new category for rule 
 
$(document).on('click', '.addrule', function() { 
 
    AddElement("categoryrule", "new-option-rule"); 
 
}); 
 

 

 

 
//Adding new category for event 
 
$(document).on('click', '.addevent', function() { 
 
\t \t AddElement("categoryevent", "new-option-event"); 
 
}); 
 

 

 
function AddElement(selectId, newElementId){ 
 
\t var found = false; // Track if new value was found in list \t \t 
 
    // Loop through list options 
 
    $("#" + selectId + " > option").each(function(idx, el) { 
 
    // Compare (case-insensitive) new value against list values 
 
    if ($("#" + newElementId).val().trim().toLowerCase() === el.textContent.toLowerCase()) { 
 
     alert("Category already exists!") 
 
     found = true; // Set flag if value exists 
 
     $('#' + newElementId).val(''); 
 
    } 
 
    }); 
 
    // If not found 
 
    if ($('#' + newElementId).val().trim() != '') { 
 
    if (!found) { 
 
     // Create new option and append to list 
 
     var val = $("#" + newElementId).val().trim(); 
 
     var opt = '<option>' + val + '</option>'; 
 
     $('#' + selectId).append(opt); 
 
     $('#' + selectId).val(val); 
 
     $('#' + newElementId).val(''); 
 
     $("#" + selectId).click(); 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Rule Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryrule" name="category"> 
 
     <option>Humidity</option> 
 
     <option>Temperature</option> 
 
     <option>Rule Type3</option> 
 
     <option>Rule Type4</option> 
 
     <option>Rule Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-rule" name="addcategoryrule"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addrule">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Event Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryevent" name="category"> 
 
     <option>SMS</option> 
 
     <option>Email</option> 
 
     <option>Invoke API</option> 
 
     <option>Event Type4</option> 
 
     <option>Event Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-event" name="addcategoryevent"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addevent">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="actionConfig"> 
 
</div>

Answer 2

在這裏，你去了一些優化的代碼https://jsfiddle.net/3tLx884e/2/

//Adding new category for rule 
 
$(document).on('click', '.addrule', function() { 
 

 
    var found = false; // Track if new value was found in list \t \t 
 
    // Loop through list options 
 
    var text = $("#new-option-rule").val().trim(); 
 
    $("#categoryrule > option").each(function(idx, el) { 
 
    // Compare (case-insensitive) new value against list values 
 
    if (text.toLowerCase() === el.textContent.toLowerCase()) { 
 
     alert("Category already exists!"); 
 
     found = true; // Set flag if value exists 
 
    } 
 
    
 
    if((idx + 1) === $('#categoryrule > option').length){ 
 
     if (!found && (text != '')) { 
 
     // Create new option and append to list 
 
     $('#categoryrule') 
 
     \t .append('<option>' + text + '</option>') 
 
      .val(text); 
 
     } 
 
     $('#new-option-rule').val(''); 
 
    } 
 
    }); 
 
    // If not found 
 
    
 
}); 
 

 

 

 
//Adding new category for event 
 
$(document).on('click', '.addevent', function() { 
 

 
    var found = false; // Track if new value was found in list \t \t 
 
    // Loop through list options 
 
    $("#categoryevent > option").each(function(idx, el) { 
 
    // Compare (case-insensitive) new value against list values 
 
    if ($("#new-option-event").val().trim().toLowerCase() === el.textContent.toLowerCase()) { 
 
     alert("Category already exists!") 
 
     found = true; // Set flag if value exists 
 
     $('#new-option-event').val(''); 
 
    } 
 
    }); 
 
    // If not found 
 
    if ($('#new-option-event').val().trim() != '') { 
 
    if (!found) { 
 
     // Create new option and append to list 
 
     var val = $("#new-option-event").val().trim(); 
 
     var opt = '<option>' + val + '</option>'; 
 
     $('#categoryevent').append(opt); 
 
     $('#categoryevent').val(val); 
 
     $('#new-option-event').val(''); 
 
     $("#categoryevent").click(); 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Rule Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryrule" name="category"> 
 
     <option>Humidity</option> 
 
     <option>Temperature</option> 
 
     <option>Rule Type3</option> 
 
     <option>Rule Type4</option> 
 
     <option>Rule Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-rule" name="addcategoryrule"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addrule">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Event Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryevent" name="category"> 
 
     <option>SMS</option> 
 
     <option>Email</option> 
 
     <option>Invoke API</option> 
 
     <option>Event Type4</option> 
 
     <option>Event Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-event" name="addcategoryevent"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addevent">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="actionConfig"> 
 
</div>

希望這會幫助你。

Answer 3

這是我對這個問題，以下jQuery的口號：「少寫，多做」 ......

我通過處理本地上下文進一步減少了代碼。 I. e。我只需要定義一個點擊事件的一切。點擊功能本身計算出，要改變的是什麼。它不需要任何id s到做的工作：

//Adding new category for rule and event 
 
$('.form-group').on('click', 'button', addElement); 
 

 
function addElement(){ 
 
    var $grp=$(this).closest('.form-group'), 
 
     ival=$('input:text',$grp).val().trim(), // new input value 
 
     $sel=$('select',$grp.prev()), // select element 
 
     opts=$.makeArray($('option',$sel).map(function(i,op){ 
 
     return op.textContent.toLowerCase(); })); 
 
    if ($.inArray(ival.toLowerCase(),opts)===-1){ // check existing option values 
 
    $sel.append('<option value="'+ival+'" selected>'+ival+'</option>'); 
 
    } 
 
    else {alert(ival+' exists already in '+$sel[0].id);} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Rule Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryrule" name="category"> 
 
     <option>Humidity</option> 
 
     <option>Temperature</option> 
 
     <option>Rule Type3</option> 
 
     <option>Rule Type4</option> 
 
     <option>Rule Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-rule" name="addcategoryrule"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addrule">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="category">Event Category:</label> 
 
    <div class="col-sm-8"> 
 
    <select class="form-control" id="categoryevent" name="category"> 
 
     <option>SMS</option> 
 
     <option>Email</option> 
 
     <option>Invoke API</option> 
 
     <option>Event Type4</option> 
 
     <option>Event Miscellaneous</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2"></label> 
 
    <div class="col-sm-8"> 
 
    <div class="col-sm-8" style="padding-left:0px;"> 
 
     <input type="text" class="form-control center-block" id="new-option-event" name="addcategoryevent"> 
 
    </div> 
 
    <div class="col-sm-2" style="padding-left:0px;"> 
 
     <button class="btn btn-md addevent">Add Category</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="actionConfig"> 
 
</div>