birden fazla jQuery olayını birleştirmek için kullanabilir ve kullanabiliriz

Question

AJAX aracılığıyla veri gönderebilmem için üç metin kutusunun değiştirilip değiştirilmediğini görmek için jQuery kullanmak istiyorum.

Ben basit bir komut dosyası çalıştı: adı, pozisyon ve maaş üç metin kutusunun ilgili kimlikleri

$("#name, #position, #salary").change(function() 
{ 
    console.log("All data are changed"); 
}); 

.

sonucu olduğunu İlkini değiştirdiğinizde:

:

Ve burada üçüncü biridir:

Ve ikinci değişti

Yani, her bir metin kutusu ayrı ayrı değiştirildiğinde mesajı aldım. İhtiyacım olan üç şey değiştiğinde, mesajı gösterir. JQuery için yeniyim, bu yüzden jQuery'de IF ... AND ... AND gibi bir şey kullanıp kullanamayacağımı bilmek istiyorum.

Answer 1

Çok sayıda doğrulama çerçevesi, kullanıcı değeri değiştirdikten sonra kirli giriş kavramına sahiptir. Bunu uygulayabilir ve tüm alanlarınızın kirli olup olmadığını kontrol edebilirsiniz.

$("#name, #position, #salary").change(function() { 
 
    this.classList.add("dirty"); 
 
    if ($(".dirty").length === 3) { 
 
    console.log("All data are changed"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="name" /> 
 
<input id="position" /> 
 
<input id="salary" />

Biz can soyut bunu yeniden kullanılabilirlik için jQuery eklentisi haline

$.fn.allChange = function(callback) { 
 
    var $elements = this; 
 
    $elements.change(function() { 
 
    this.classList.add("dirty"); 
 
    if (callback && $elements.filter(".dirty").length === $elements.length) { 
 
     callback.call($elements); 
 
    } 
 
    }); 
 
    return $elements; 
 
} 
 

 
$("#name, #position, #salary").allChange(function() { 
 
    console.log("All data are changed"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="name" /> 
 
<input id="position" /> 
 
<input id="salary" />

Answer 2

Birden çok seçiciyi bir değişkende saklayın. .change()'da, giriş değerlerini test etmek için çoklu seçicideki öğeler arasında geçiş yapın. Tüm girdilerin içeriği varsa, ek bir işlev çağrılabilir.

$(document).ready(function(){ 
 
    
 
    var $selectors = $('#input1, #input2, #input3'); 
 

 
    $selectors.change(function(){ 
 
    var allChanged = true; 
 
    console.log($(this).attr('id') + ' was changed.'); 
 

 
    $selectors.each(function(){ 
 
     if ($(this).val() == '') { 
 
     allChanged = false; 
 
     } 
 
    }); 
 

 
    if (allChanged) { 
 
     // $().ajax(); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="input1"> 
 
<input id="input2"> 
 
<input id="input3">

Answer 3

Bir dizide değiştirilen girişlerinizi depolamak ve değiştiyse nerede hepsi eğer algılamak için boyda kontrol edebilirsiniz.

var changedInputs = []; 
$("#name, #position, #salary").change(function() 
{ 
    changedInputs.push(this.id); 
    if(changedInputs.length === 3) { 
     alert('All 3 inputs where changed!'); 
    } 
}); 

Answer 4

Bu yaklaşımı da kullanabilirsiniz.

<input class="need"> 
<input class="need"> 
<input class="need"> 
$(".need").change(function() 
{ 
    var all = 0; 
    $(".need").each(function(i,v){ 
     if ($(v).val().length >0) { 
      all+=1; 
     } 
    }); 
    if(all.length == 3) { 
     alert('All 3 inputs where changed!'); 
    } 
}); 

Answer 5

bir sınıf kullanmayı deneyin

var changedInputs = []; 
$("#name, #position, #salary").change(function() 
{ 
    if !(changedInputs.include(this.id)){ 
    changedInputs.push(this.id); 
    if(changedInputs.length == 3) { 
     alert('All 3 inputs where changed!'); 
    } 
}); 

Answer 6

Deneyebilirsin: Fiddle

var isNameChanged, isPositionChanged, isSalaryChanged = false; 

function fieldsChanged() 
{ 
    var id = $(this).attr('id'); 
    if (id == 'name') isNameChanged = true; 
    else if (id == 'position') isPositionChanged = true; 
    else if (id == 'salary') isSalaryChanged = true; 

    if (isNameChanged && isPositionChanged && isSalaryChanged) { 
    console.log('All have been changed'); 
    isNameChanged = isPositionChanged = isSalaryChanged = false; 
    } 
} 

$(function(){ 
    $('#name, #position, #salary').change(fieldsChanged); 
}); 

Answer 7

olası bir çözüm:

var needed = ["name", "position", "salary"]; 

$("#name, #position, #salary").change(function() 
{ 
    if(needed.length == 0) return; 
    needed.splice(needed.indexOf($(this).attr('id')), 1); 
    if(needed.length == 0) 
     console.log("All data are changed"); 
}); 

ilk olarak, diziyi init gerekir Gerekli tüm alanlara "ihtiyaç duyulan" 0

ilk şart kez

birden mesaj daha oturum açmak için değil sağlamaktır); bir alan değiştiğindesonra, dizinin boş zamanlar, gerekli tüm değerler değiştirilir gerekli diziden o alanı kaldırmak

Answer 8

Daha sonra, birini varsayılan mevcut giriş değeri karşılaştırabilirsiniz mantık aşağıdaki gibi olabilir:

Bu o imho yapılmalıdır çünkü nasıl

btw i

... tüm girişler kontrol etmek için ortak bir sınıf set

$('.inputToCheck').on('change', function() { 
 
    var allInputsChanged = !$('.inputToCheck').filter(function() { 
 
    return this.value === this.defaultValue; 
 
    }).length; 
 
    if (allInputsChanged) alert('All inputs changed!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="name" class="inputToCheck"> 
 
<input id="position" class="inputToCheck"> 
 
<input id="salary" class="inputToCheck">