有没有更短的方法(实际上是更清洁的方法)来执行以下代码?

if (whichToCheck == 1) {
    if ($('#input_3').val().length) {
        $('#error1').css('display', 'none');
        $('#error1').css('visibility', 'hidden');
        hasErrors = false;
    } else {
        $('#error1').css('display', 'block');
        $('#error1').css('visibility', 'visible');
        hasErrors = true;
    }
}
else if (whichToCheck == 2) {
    if ($('#input_4').val().length) {
        $('#error2').css('display', 'none');
        $('#error2').css('visibility', 'hidden');
        hasErrors = false;
    } else {
        $('#error2').css('display', 'block');
        $('#error2').css('visibility', 'visible');
        hasErrors = true;
    }
}
else if (whichToCheck == 3) {
    if ($('#input_5').val().length) {
        $('#error3').css('display', 'none');
        $('#error3').css('visibility', 'hidden');
        hasErrors = false;
    } else {
        $('#error3').css('display', 'block');
        $('#error3').css('visibility', 'visible');
        hasErrors = true;
    }
}
else if (whichToCheck == 4) {
    if ($('#input_7_0').is(':checked')) {
        $('#error4').css('display', 'none');
        $('#error4').css('visibility', 'hidden');
        hasErrors = false;
    } else {
        $('#error4').css('display', 'block');
        $('#error4').css('visibility', 'visible');
        hasErrors = true;
    }
}
else if (whichToCheck == 5) {
    if ($('#input_6').val().length) {
        $('#error5').css('display', 'none');
        $('#error5').css('visibility', 'hidden');
        hasErrors = false;
    } else {
        $('#error5').css('display', 'block');
        $('#error5').css('visibility', 'visible');
        hasErrors = true;
    }
}

谢谢!

#1楼 票数:3

首先,您应该使用switch块并将要修改的元素存储在变量中。 简洁版本:

var input, error;
switch(whichToCheck){
    case 1:
        input=$('#input_3');
        error=$('#error1');
        break;
    case 2:
        input=$('#input_4');
        error=$('#error2');
        break;
    default:
        ...
        break;
}
var hasErrors = !!input.val().length;
if(hasErrors) error.show(); else error.hide();

或更短一些:

hasErrors&&error.show();
hasErrors||error.hide();

#2楼 票数:2

一个更好的方式来做到这些if..then ... else语句是使用一个switch语句。 尤其是当您要寻找多个值时...

switch(whichToCheck){
  case "1":
    // when whichToCheck == 1
  break;
  case "2":
    // when whichToCheck == 2
  break;
  default:
    // when the value of whichToCheck doesn't match any expected value
  break;
}

可以减少代码的另一件事是使用jQuery的show()hide()函数来...好吧...隐藏和显示元素:)您实际上不必显式设置displayvisibility属性。

参考-

#3楼 票数:2

您可以通过动态选择元素来缩短很多时间。 另外,将它们放在“缓存”变量中,而不是重新创建jQuery实例。 您可以通过传入对象来为jQuery的.css()方法使用简写形式。 另外,您应该将这两种不同的样式放入变量中,而不要重复它们-进行所有操作以使代码更加干燥。

单线:

$('#error'+whichToCheck).css( (hasErrors = !$('#input_'+(2+whichToCheck)).val().length)
   ? {display: 'block', visibility: 'visible'}
   : {display: 'none', visibility: 'hidden'}
);

但是,您的ID似乎不太规则,因此我建议使用映射器,以替代一百万个IF语句 (可能重复):

var toCheck = document.getElementById( 'input_' + {1:'3', 2:'4', 3:'5', 4:'7_0', 5:'6'}[whichToCheck] ),
    errorEl = $('#error'+whichToCheck);
hasErrors = !(toCheck.type=="checkbox" ? toCheck.checked : toCheck.value);
if (hasErrors)
    errorEl.css({display: 'block', visibility: 'visible'});
else
    errorEl.css({display: 'none', visibility: 'hidden'});

此外,您不需要设置display visibility ,如果你想使用jQuery的.hide() / .show()它会工作的非块元素,太:

errorEl[hasErrors ? "show" : "hide"]();

#4楼 票数:1

最好设置CSS:

$('#error1').css({'display': 'none', 'visibility': 'hidden'});

#5楼 票数:1

对于初学者,您可以创建css类并在jQuery中使用addClass函数

例如:

的CSS

.hide{
  display: none;
  visibility: hidden;
}

jQuery的

$('#error1').addClass("hide");

#6楼 票数:1

在编写代码时

 $('#error3').css('display', 'block');
 $('#error3').css('visibility', 'visible');

在多个位置重复以更改样式。 您可以将其设置为一个函数,以便传递错误字段名称吗?

对于#error3您将参数传递为3,然后将显示和可见性参数传递给该参数。

谢谢

#7楼 票数:1

您可以根据whichToCheck的值生成ID,并使用jQuery的hide方法隐藏元素:

function toggleErrors($input, whichToCheck){
  if($input.val() !== '' || $input.is(':checked')){
    $('#error' + whichToCheck).hide();
  }else{
    $('#error' + whichToCheck).show();
  }
}

将whichToCheck和相应的输入元素传递给函数。

#8楼 票数:1

  1. 使用Armel提到的Switch()语句。
  2. 分别提取Show()和Hide()方法。

这是示例:

if (whichToCheck == 1) {
        if ($('#input_3').val().length) {
            Show('#error1');
            hasErrors = false;
        } else {
            Hide('#error1');
            hasErrors = true;
        }
    } else if (whichToCheck == 2) {
        if ($('#input_4').val().length) {
            Show('#error2');
            hasErrors = false;
        } else {
            Hide('#error2');
            hasErrors = true;
        }
    } else if (whichToCheck == 3) {
        if ($('#input_5').val().length) {
            Show('#error3');
            hasErrors = false;
        } else {
            Hide('#error3');
            hasErrors = true;
        }
    } else if (whichToCheck == 4) {
        if ($('#input_7_0').is(':checked')) {
            Show('#error4');
            hasErrors = false;
        } else {
            Hide('#error4');
            hasErrors = true;
        }
    } else if (whichToCheck == 5) {
        if ($('#input_6').val().length) {
            Show('#error5');
            hasErrors = false;
        } else {
            Hide('#error5');
            hasErrors = true;
        }
    }

    function Show(id) {

        $(id).show();

    }

    function Hide(id) {
        $(id).hide();
    }

#9楼 票数:1

缩短代码的关键似乎是whichToCheck变量的来源。 或者,您可以执行以下操作:

//...
if ( $('#input_' + whichToCheck).val().length ) {
    $('#error_' + whichToCheck).css ( { 'display' : 'none', 'visibility' : 'hidden' } );
} else {
    $('#error_' + whichToCheck).css ( { 'display' : 'block', 'visibility' : 'visible' } );        
}

  ask by StealthRT translate from so

未解决问题?本站智能推荐:

2回复

有没有办法缩短这段代码? 目前它工作正常

这是我的代码。 还有其他方法吗? $("._nf-short-ans").on("click", function(){ $(".nf-short-desc").removeClass("nf-hide"); $(".nf-main-c").addClass("nf-hide");
4回复

有没有办法缩短这个jQuery代码?

是否有任何替代方法可以缩短此代码? 它工作正常,但我在想是否有任何方法可以缩短它。 function hideElem() { $("._nf-short-ans").on("click", function() { $(".nf-short-desc").removeClass("nf
3回复

有没有办法使这段代码变种?

我有以下代码: 因为我有很多情况,所以我想制作.hide().appendTo("#placeholder").fadeIn(1000); 变成一个变量。 我尝试了var addText = .hide().appendTo("#placeholder").fadeIn(1000
2回复

有没有办法缩短这个jQuery?

我有这段jQuery,我知道它是重复的。 我需要一些帮助来清理它,我仍然是jQuery / JavaScript的新手! 我不知道是否使用循环或类似的东西 以及如何实现它.....现在已经搜索了几天,似乎也无法使我明白! 任何帮助,将不胜感激。
1回复

有没有办法使用纯 javascript 或 jquery 来取消缩短 url? [关闭]

关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善
1回复

有没有办法让这段代码更短、更高效? [关闭]

关闭。 此问题不符合Stack Overflow 准则。 它目前不接受答案。
3回复

有没有办法简化 jQuery 代码 [关闭]

关闭。 这个问题是基于意见的。 它目前不接受答案。 想改善
2回复

有没有办法缩短多个.next()?

如果你有 本质上,它与兄弟元素有所不同。 有没有办法将next()负载转换为特定的负载? 例如,我希望我可以做5次next(5)= next()。 有没有办法做到这一点? 有没有办法对prev()做到这一点?