Question

作为一个新的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;
  }
});

或成语

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

如您所见，其中有很多复制粘贴。我认为这段代码可能会更紧凑。

将不胜感激所有帮助！

提前谢谢！

Answer 1

您可以使用多种方法来减少代码量：

1）您可以使用toggleClass或addClass和removeClass来更新嵌套的一组attr类的类

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

和许多其他解决方案...

Answer 2

这就是我减少代码的方式。您可以通过运行代码片段进行检查。

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>

如何使.attr变量

2 个答案: