как сделать переменную .attr - PullRequest
Новая
       6

как сделать переменную .attr

0 голосов
/ 13 ноября 2018

Как новый jquery noob я пытаюсь создать переменную .attr вместо копирования и вставки всех стилей.

Что мне нравится делать, так это следующее: 

$(document).ready(function(){  
   var STYLE= attr("class", "btn-outline-danger btn-lg disabled form-control");
   var test = 0;
$('#submit-next').click(function(){
  if (test = '') {       
    $(VARIABLE).STYLE;
  }
});

или prehaps 

$(document).ready(function(){  
   var STYLE= attr("class", "btn-outline-danger btn-lg disabled form-control");
   var VARIABLE = $('#div');       
$('#submit-next').click(function(){
   var test = 0;
   if (test = '') {       
     VIRIABLE.STYLE;
   }
});

Мой код выглядит следующим образом; 

$(document).ready(function(){  
    $('#submit-next').click(function(){ 

var adress = $('#adress').val(); 
var zipcode = $('#zipcode').val(); 
var city = $('#city').val();

if (adress == ''  || zipcode == ''  || city == '') {
       // ADRESS
        if(adress == '')  
        {  
            $('#error_adress').html("Adress is required"); 
            $('#submit-next').attr("data-target","");
            $('#adress').attr("class", "btn-outline-danger btn-lg disabled form-control");

        } else {
            $('#error_adress').html(""); 
            $('#adress').attr("class", "btn-outline-primary btn-lg disabled form-control");
        }

        // ZIPCODE
        if(zipcode == '')  
        {  
            $('#error_zipcode').html("Zipcode is required"); 
            $('#submit-next').attr("data-target","");
            $('#zipcode').attr("class", "btn-outline-danger btn-lg disabled form-control");

        } else {
            $('#error_zipcode').html("");
            $('#zipcode').attr("class", "btn-outline-primary btn-lg disabled form-control"); 
        }

        // CITY
        if(city == '')  
        {  
            $('#error_city').html("City is required"); 
            $('#submit-next').attr("data-target","");
            $('#city').attr("class", "btn-outline-danger btn-lg disabled form-control");

        } else {
            $('#error_city').html(""); 
            $('#city').attr("class", "btn-outline-primary btn-lg disabled form-control");
        }

} else {   
        $('#error_adress').html(""); 
        $('#error_zipcode').html(""); 
        $('#error_city').html("");
        jQuery('#submit-next').attr("data-target","#createclientcontact");   
        }
    });  
});

Как вы видите, это много копийных вставок .. Я думаю, что этот код может быть гораздо более компактным.

Вся помощь будет принята с благодарностью!

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Вот так я и сократил твой код. Вы можете проверить, запустив фрагмент кода.

PS: Я предположил, что вы используете входные теги, поэтому я использовал $("input:not('#submit-next')").each( function(el, ind) Но в зависимости от вашего кода эта часть может быть изменена. 

$(document).ready(function(){  
    $('#submit-next').click(function(){
    	$("input:not('#submit-next')").each( function(el, ind) {
    		let content = $(this).val();
    		let elm = $(this).attr('id');
    		if (!content.length) {
    			$("#error_"+elm).html(elm+" is required");
    			$('#submit-next').attr("data-target","");
    			$(elm).attr("class", "btn-outline-danger btn-lg disabled form-control");
    		} else {
	            $("#error_"+elm).html("");
	            $(elm).attr("class", "btn-outline-primary btn-lg disabled form-control");
    		}
    	});
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="adress">
<input type="text" id="zipcode">
<input type="text" id="city">
<input type="button" id="submit-next" name="submit-next" value="submit-next">
<p id="error_adress"></p>
<p id="error_zipcode"></p>
<p id="error_city"></p>
0 голосов
/ 13 ноября 2018

Вы можете использовать более одного способа уменьшить ваш код, который подходит:

1) Вы можете использовать toggleClass или addClass и removeClass для обновления классов, не входящих в набор групп классов attr

2) Вы можете создать функцию, которая принимает 2 параметра один для селектора и второй для классов, и это решит проблему

3) Вы можете заказать код, чтобы предотвратить удаление и удаление ненужных условий, таких как задание класса перед условием, а при неправильном добавлении неправильного класса.

4) Вы можете сохранить общий класс в переменной

... и не только ...

в первой точке вы можете сделать это: 

$('#adress').addClass("btn-lg disabled form-control");
 if(adress == '')  
        {  
$('#adress').addClass("btn-outline-danger").removeClass('btn-outline-primary');
}else{
$('#adress').removeClass("btn-outline-danger").addClass('btn-outline-primary');
}

Также вы можете построить как эта функция: 

function setClasses(selector, classes){
   $(selector).attr('class', claesses);
}

Также вы можете сохранить общий класс в переменной следующим образом: 

var commonClass = "btn-lg disabled form-control"

Окончательный результат для примера кода: 

var commonSuccessClass = "btn-outline-primary btn-lg disabled form-control";
var commonWrongClass   = "btn-outline-danger btn-lg disabled form-control";
if(adress == '')  
            {  
                $('#error_adress').html("Adress is required"); 
                $('#submit-next').attr("data-target","");
                setClasses('#selector', commonWrongClass);
            } else {
                $('#error_adress').html(""); 
                setClasses('#selector', commonSuccessClass);
            }

и много других решений ...

...