Блог

В настоящее время я создал систему add more, чтобы генерировать больше полей для пользователей в форме, а затем также проверять строку запроса, если форма завершается с ошибкой. Однако это делается более процедурным способом, поскольку каждая версия является отдельной, что приводит к дублированию аналогичного кода примерно 5 раз (по одному для каждой версии и для каждой функции), и мне было интересно, не могли бы вы помочь мне преобразовать его в более ООП-способ, чтобы это был только один набор кода, облегчающий запуск в моей системе и, таким образом, не заставляющий меня запускать так много кода и более оптимизированный код

Я пытался сделать его несколько ООП, но я продолжаю получать ошибки, так как я не очень хорош в JavaScript или ООП Я заставил его работать с базовым JavaScript, но это означает, что у меня так много дополнительных строк кода

Итак, вот базовый код, который работает, однако, как показано, он будет продублирован еще 3 раза после этих

 <script>
<!-- MORE BIKES -->
var max_fields_morebikes = 4;
var wrapper_bike = $("#currentbikes");
var add_button_morebikes = $("#morebikes");
var counter_bikes = 1;

<!-- add and delete for morebikes -->
$(add_button_morebikes).click(function (e) {
    e.preventDefault();
    if (counter_bikes < max_fields_morebikes) {
        counter_bikes  ;
        $(wrapper_bike).append('<div class="morebikesadd"><input type="text" name="currentbike[]" class="currentbikesadd" placeholder="Current Bikes" ><button class="delete">Delete</button></div>');
        //add input box
    } else {
        alert('You Reached the limits')
    }
});
$(wrapper_bike).on("click", ".delete", function (e) {
    e.preventDefault();
    $(this).parent('div').remove();
    counter_bikes--;
});
</script>
  

а также есть версии, в которых добавляется 2 набора входных данных

 <script>
<!-- RACES HISTORY -->
var max_fields_racehist = 5;
var wrapper_racehist = $("#racinghistoryresults");
var add_button_racehist = $("#moreracehist");
var counter_racehist = 1;

<!-- add and delete for RaceHistory -->
$(add_button_racehist).click(function (e) {
    e.preventDefault();
    if (counter_racehist < max_fields_racehist) {
        counter_racehist  ;
        $(wrapper_racehist).append('<div style=" margin-top: 10px; margin-bottom: 10px;"><input type="text" name="racehist[]" class="racehist addmoreracehistory" placeholder="Race History">amp;nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">amp;nbsp;<button class="delete">Delete</button></div>');
        //add input box
    } else {
        alert('You Reached the limits')
    }
});
$(wrapper_racehist).on("click", ".delete", function (e) {
    e.preventDefault();
    $(this).parent('div').remove();
    counter_racehist--;
});
</script>
  

Это метод, который я пробовал, по крайней мере, при наличии одного ввода

 <button type="button" onclick="return addMoreRows(5,1, 'morebikesadd', 'currentbike','currentbikesadd','Current Bike', 'delete')"> Add More</button>
<script>
 function addMoreRows(numFields, maxCounter, addMoreClass, inputName, inputClass, placeHolderName,buttonClass){
        var max_fields = numFields;
        var wrapper = document.createElement("div");
        var counter = maxCounter;

        if (counter < max_fields) {
            counter  ;
            wrapper.appendChild('<div class="'   addMoreClass   '"><input type="text" name="'  inputName  '[]" class="'  inputClass  '" placeholder="'  placeHolderName  '"><button class="'  buttonClass  '"> Delete </button></div>');
        }
        else {
            alert('You Have Reached the limits')
        }

    }
</script>
  

Я хочу знать, если возможно, как я могу объединить его, чтобы он просто принимал значения, которые я ввел, и работал, поэтому мне нужна только 1, возможно, 2 функции (зависит от того, может ли он объединять только 1 вход и 2 входа), чтобы я мог сделать onclick=" addMoreRows(values,values,etc)" , чтобы это было проще

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

В вашем коде есть два типа: велосипеды и история гонок. Они имеют похожие свойства, такие как maxLimit , currentCount selector и html для нового элемента.
Итак, вы можете сделать object следующее:

 var itemTypes = {
    bike:{
        maxLimit: 4,
        currentCount: 1,
        selector: '#currentbikes',
        newElement: '<div class="morebikesadd"><input type="text" name="currentbike[]" class="currentbikesadd" placeholder="Current Bikes" ><button class="delete">Delete</button></div>'
    },
    raceHistory:{
        maxLimit: 5,
        currentCount: 1,
        selector: '#racinghistoryresults',
        newElement: '<div style=" margin-top: 10px; margin-bottom: 10px;"><input type="text" name="racehist[]" class="racehist addmoreracehistory" placeholder="Race History">amp;nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">amp;nbsp;<button class="delete">Delete</button></div>'
    }
}
  

Из вашего html просто отправьте свой тип в качестве аргумента для вашей addMoreRows() функции, например, для bike использования следующим образом:

 <button type="button" onclick="return addMoreRows('bike')"> Add More Bike</button>
  

ИЛИ используйте следующее для raceHistory

 <button type="button" onclick="addMoreRows('raceHistory')"> Add More Race History</button>
  

и обработайте из вашей addMoreRows() функции следующим образом

 function addMoreRows(type){
    var item = itemTypes[type];
    if (item.currentCount < item.maxLimit) {
        item.currentCount  ;
        $(item.selector).append(item.newElement);
    }
    else {
        alert('You Have Reached the limits')
    }
}
  

Hola! Теперь все обобщено!

Если вы хотите добавить другой тип, например, motorBike , то просто обновите свой itemTypes объект следующим образом:

 var itemTypes = {
    bike:{
        maxLimit: 4,
        currentCount: 1,
        selector: '#currentbikes',
        newElement: '<div class="morebikesadd"><input type="text" name="currentbike[]" class="currentbikesadd" placeholder="Current Bikes" ><button class="delete">Delete</button></div>'
    },
    raceHistory:{
        maxLimit: 5,
        currentCount: 1,
        selector: '#racinghistoryresults',
        newElement: '<div style=" margin-top: 10px; margin-bottom: 10px;"><input type="text" name="racehist[]" class="racehist addmoreracehistory" placeholder="Race History">amp;nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">amp;nbsp;<button class="delete">Delete</button></div>'
    },
    motorBike:{
        maxLimit: 10,
        currentCount: 1,
        selector: '#selectorformotorbike',
        newElement: '<div>Put your desired code for new element</div>'
    }
}
  

Вам не нужно ничего делать в вашем javascript для новых изменений!

Вот рабочий код:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<button type="button" onclick="addMoreRows('raceHistory')"> Add More Race History</button>

<div id="racinghistoryresults">
</div>

<script>
var itemTypes = {
    bike:{
        maxLimit: 4,
        currentCount: 1,
        selector: '#currentbikes',
        newElement: '<div class="morebikesadd"><input type="text" name="currentbike[]" class="currentbikesadd" placeholder="Current Bikes" ><button class="delete" onclick="deleteRow(this, 'bike')">Delete</button></div>'
    },
    raceHistory:{
        maxLimit: 5,
        currentCount: 1,
        selector: '#racinghistoryresults',
        newElement: '<div style=" margin-top: 10px; margin-bottom: 10px;"><input type="text" name="racehist[]" class="racehist addmoreracehistory" placeholder="Race History">amp;nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">amp;nbsp;<button class="delete" onclick="deleteRow(this, 'raceHistory')">Delete</button></div>'
    }
}

function addMoreRows(type){
    var item = itemTypes[type];
    if (item.currentCount < item.maxLimit) {
        item.currentCount  ;
        $(item.selector).append(item.newElement);
    }
    else {
        alert('You Have Reached the limits')
    }
}

function deleteRow(event, type){
  $(event).parent('div').remove();
  itemTypes[type].currentCount--;
};
</script>  

Надеюсь, это поможет вам!