Je peux créer des objets membres en utilisant le codage html suivant. Mais pour certains calculs, j'ai besoin d'obtenir le nombre d'objets membres. De plus, lorsque je supprime l'un des objets membres, cela devrait réduire le nombre d'objets membres.

La fonction suivante créera les membres.

function appendMember(rowNumber) {
    debugger

    var subrowNumber = parseInt($("#itemmapWrapper" + rowNumber + "").attr("data-subrowNumber"));


    subrowNumber = isNaN(subrowNumber) ? 1 : subrowNumber + 1;

    var addNewItemDetailHtml = "<div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 itemmapAllocationWrapper  custom-paaddingnone form-group' \
                               id='dvaddNewItemDetailSub" + subrowNumber + "' data-subrowNumber='" + subrowNumber + "'>";

    addNewItemDetailHtml += "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 custom-paaddingnone'>\
                                <div class='col-lg-3 col-md-3 col-sm-3 col-xs-3 custom-paaddingnone text-center'>\
                                </div>\
                                <div class='col-lg-9 col-md-9 col-sm-9 col-xs-9 custom-paaddingnone'>\
                                    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12 custom-paaddingnone'>\
                                        <div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 custom-paaddingnone'>\
                                            <select class='form-control' id ='memberid"+ rowNumber + subrowNumber + "' ></select>\
                                        </div>\
                                    </div>\
                                </div>\
                             </div>";

    addNewItemDetailHtml += "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2 custom-paaddingnone'>\
                                <span class='glyphicon glyphicon-trash removeBtn' onclick = 'removeMemberDetail(this)' ></span >\
                            </div>";

    addNewItemDetailHtml += "</div>";

    addNewItemDetailHtml += "</div>";



    $("#itemmapWrapper" + rowNumber + "").attr("data-subrowNumber", subrowNumber);
    $(".memberContainer").append(addNewItemDetailHtml);
    intialize_memberDropDown(rowNumber, subrowNumber);
}

Ce code prendra les données de db dans le menu de sélection des membres.

function intialize_memberDropDown(rowNumber, subrowNumber) {
    $.ajax({
        type: "GET",
        url: "/Member/GetAllMember/",
        cache: false,
        success: function (data) {
            debugger
            var countryHTMLString = "<option value ='0'>Select Member</option>";
            if (data.isSucess) {
                $.each(data.data, function (index, item) {
                    countryHTMLString += "<option value ='" + item.memberid + "'>" + item.membername + "</option>";

                });
            }
            $("#memberid" + rowNumber + subrowNumber + "").html(countryHTMLString)
            calculateTotalHotailBill(rowNumber)
        }, error: function (err) {
            debugger
        }
    });
}

Ce code final supprimera le membre un que je clique sur le bouton de la corbeille que j'ai implémenté sur la fonction de membre d'ajout.

function removeMemberDetail(buttonElement) {
    debugger
    $(buttonElement).parents(".itemmapAllocationWrapper").remove();

    if ($(".itemmapAllocationWrapper").html() == "") {
        $("#memberid").removeAttr("disabled");
    }
}
1
DinupaChamin 6 nov. 2019 à 10:29

2 réponses

Meilleure réponse

Ajoutez simplement une entrée cachée avec une valeur 0 ou quelle que soit la valeur initiale de vos objets à chaque fois que vous utilisez ajouter du code membre, augmentez-la et lorsque vous utilisez supprimer un membre, diminuez-la votre code html

<input type='hidden' id='objectsCounter' value='0'>

Fonction d'augmentation javascript ajouter cette ligne à la fin

var objectCounter = document.getElementById('objectsCounter').value;
objectCounter++;
document.getElementById('objectsCounter').value = objectCounter

Et à la fin de la suppression des membres, ajoutez cette fonction

var objectCounter = document.getElementById('objectsCounter').value;
objectCounter--;
document.getElementById('objectsCounter').value = objectCounter

Vous pouvez obtenir la valeur des objets à tout moment en utilisant

var objectCounter = document.getElementById('objectsCounter').value;
-1
Amado 6 nov. 2019 à 07:35

Vous pouvez compter les enfants de votre MemberContainer. Si vous n'en avez qu'un, je lui donnerais un identifiant au lieu d'un nom de classe. Mais cela fonctionne dans les deux sens.

console.log(document.getElementsByClassName("memberContainer")[0].children.length)
<div class="memberContainer">
  <div>child</div>
  <div>child</div>
  <div>child</div>
</div>
2
Bolphgolph 6 nov. 2019 à 07:50