Question

在图片中，您可以看到每列上有三个输入，除了最后一个，我想要显示第一列的输入数量＆＃34; Configuratie panouri＆＃34;默认情况下隐藏，只有当需要时才通过javascript显示。在我的情况下，在最后一个输入中我应该得到数字3，因为第一列中有3个输入由javascript显示。

Inputs

HTML code：

<div class="input-group date col-xs-4" id="PanouriFinale">
      <label>Configurație panouri</label>
      <input type="text" class="form-control centerElement" name="SuperiorPanel" id="SuperiorPanel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar3Panel" id="Intermediar3Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar2Panel" id="Intermediar2Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar1Panel" id="Intermediar1Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="InferiorPanel" id="InferiorPanel" readonly style="display: none; border: 2px solid white;">
    </div>

和javascript：

if (Height >= 1845 && Height <= 3000)
        {
            $.ajax({
                url: "includes/calculator/inferiorPanel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    $("#InferiorPanel").show().val(result);
                    $("#InferiorPanel2").show().val(result);
                    $("#PVInferior").show();
                    $("#FInferior").show();
            }});

            $.ajax({
                url: "includes/calculator/Intermediar1Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    $("#Intermediar1Panel").show().val(result);
                    $("#Intermediar1Panel2").show().val(result);
                    $("#PVIntermediar1").show();
                    $("#FIntermediar1").show();
            }});

            $.ajax({
                url: "includes/calculator/Intermediar2Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    if(result === '0') {
                        $("#Intermediar2Panel").hide();
                        $("#Intermediar2Panel2").hide();
                    } else
                    {
                        $("#Intermediar2Panel").show().val(result);
                        $("#Intermediar2Panel2").show().val(result);
                        $("#PVIntermediar2").show();
                        $("#FIntermediar2").show();
                    }
            }});

            $.ajax({
                url: "includes/calculator/Intermediar3Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    if(result === '0') {
                        $("#Intermediar3Panel").hide();
                        $("#Intermediar3Panel2").hide();
                    } else 
                    {
                        $("#Intermediar3Panel").show().val(result);
                        $("#Intermediar3Panel2").show().val(result);
                        $("#PVIntermediar3").show();
                        $("#FIntermediar3").show();
                    }
            }});

            var InferiorPanel2 = document.getElementById('InferiorPanel2');
            var Intermediar1Panel2 = document.getElementById('Intermediar1Panel2');
            var Intermediar2Panel2 = document.getElementById('Intermediar2Panel2');
            var Intermediar3Panel2 = document.getElementById('Intermediar3Panel2');

            $.ajax({
                url: "includes/calculator/SuperiorPanel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
            $("#SuperiorPanel").show().val(result);
            $("#SuperiorPanel2").show().val(Height - InferiorPanel2.value - Intermediar1Panel2.value - Intermediar2Panel2.value - Intermediar3Panel2.value);
            }});
            $("#PVSuperior").show();
            $("#FSuperior").show();
            var totalP = $('#PanouriFinale input').filter(function() {
                return $(this).css('display') !== 'none';
            }).length;
            $("#totalPanouri").val(totalP);
            return false;
        } else
        {
            document.getElementById('height').style.borderColor = "red";
            document.getElementById('erori').innerHTML = "<span style='color: red;'>Introdu o valoare cuprinsă între 1845 și 3000mm!</span>";
            return false;
        }

如您所见，所有输入都是隐藏的，但在需要时会显示javascript。我想要的只是计算我在第一列中有多少可见输入，名为＆＃34; Configuratie panouri＆＃34;并在图片的最后一个输入上显示。

Answer 1

如果我理解你的问题：

// Gets all inputs with class name 'centerElement'
var inputsIWant = panouriFinale.getElementsByClassName('centerElement');
var inputsIWantLn = inputsIWant.length;

var numberOfVisibleInputs = 0;
for (var i = 0; i < inputsIWantLn; i++) {

    // Goes through each input to see if display is set to none
    if (inputsIWant[i].style.display == "none") {
        numberOfVisibleInputs++;
    }
}

// Logs the number of inputs that aren't hidden
console.log(numberOfVisibleInputs);

计算具有javascript值的所有显示输入（未隐藏）

1 个答案: