2017-08-08 9 views
0

を選択するための新しいオプションを追加するための反復コードを最適化し、私のバイオリンです:DEMOはここでjqueryの

私が選択支配する新しいオプションを追加し、イベントカテゴリのコードを繰り返してきました。どのように私は繰り返しコードを排除するために同じ最適化を行うのですか?

//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(); 
    } 
    } 

}); 
+0

申し訳ありませんが、私はあなたのフィドルを更新したこと - 私はそれが実際のフィドル自体を更新します実現しませんでした。私は古いバージョンに戻します。ちょうどチェックされて、それは実際のフィドルを更新しませんでした。 – Yatin

答えて

0

あなたが行く - 一般的な機能は、多くのことができます:

//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>

0

ここでは、いくつかの最適化されたコード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>

これはあなたを助けることを願って行きます。ここで

0

これは、jQueryのスローガン、次のような問題が私の感想です: "複数の操作を行い、以下の記述は、" ...

ローカルコンテキストで作業することでコードをさらに縮小しました。 I.私はを定義する必要があります。すべてのイベントをクリックします。クリック機能自体が何を変更するのかがわかります。それは、その仕事をするために、任意のid秒を必要としません:

//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>