Question

我目前已经建立了一个添加更多系统，可以为表单中的用户生成更多字段，然后还可以在表单失败时检查查询字符串。但是，它是以一种更具过程性的方式完成的，因为每个版本都是自己的，这使我将相似的代码重复了5次（每个版本和每个功能一个），并且想知道是否可以帮助我将其转换为更多版本一种OOP方式，因此只需一组代码即可简化在我的系统上的运行，从而不会让我运行太多的代码和更简化的代码

我尝试将其设置为OOP，但是由于我不太擅长JavaScript或OOP，所以我不断收到错误消息，但我无法使用它来运行基本的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>

，还有一些版本，其中添加了两组输入

<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">&nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">&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)"来做

Answer 1

根据您的问题，您想要编写代码，例如不需要多次编写相同类型的函数。

您的代码中有两种类型：自行车和 raceHistory 。它们具有类似的属性，例如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">&nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">&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">&nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">&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">&nbsp;<input type="text" name="results[]" class="results addmorementionableresults" placeholder="Mentionable Results">&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>

希望，这对您有帮助！

在将过程式JavaScript转换为更多OOP代码版本时遇到麻烦

1 个答案: