Javascript函数参数转换为jQuery或HTML标签

Javascript function parameter into jQuery or HTML tags

本文关键字：HTML 标签 jQuery 函数 参数 转换 Javascript      更新时间：2023-09-26

这是我创建输入字段的原始代码：

$('#dynamicForm').append('<li id="pdport"></li>');
$('#pdport').append("<label for='sport'>Destination port</label>")
$('<input>').attr({type: 'text', id: 'dport', name: 'dport'}).appendTo('#pdport');
$('#pdport').append("<span>Enter the destination port here (0-65535)</span>");

我没有一遍又一遍地做这段代码，而是尝试为它创建一个函数

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $(mainID).append('<li id=childID></li>');
    $(childID).append("<label for=labelFor>labelText</label>")
    $('<input>').attr({type: 'text', id: labelFor, name: labelFor}).appendTo(childID);
    $(childID).append("<span>spanText</span>");
}

而不是调用函数 

createInputfield("#dynamicForm", "#psport", "sport", "Source port", "Enter the source port here (0-65535)");

这样，我可以创建许多动态输入字段，而无需复制/粘贴大量相同的代码。

问题是这不起作用，我总是收到语法错误，就像你不能在 mainID 和其他上附加一样。我尝试了很多不同的方法来实现这一目标，例如使用引号，使用单引号，没有..但似乎没有任何效果。

你忘了转义你的变量并将它们连接到字符串

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $(mainID).append('<li id='+childID.replace('#','')+'></li>');
    $(childID).append("<label for="+labelFor+">"+labelText+"</label>")
    $('<input>').attr({
        type: 'text', 
        id: labelFor, 
        name: labelFor
    }).appendTo(childID);
    $(childID).append("<span>"+ spanText +"</span>");
}

这可能有效

> Marvin 很接近。他发现缺少字符串连接。您还忘记了您正在发送以#开头的字符串，但正在使用那些不能接受以 # 开头的字符串的字符串。

更新：看起来马文也抓住了#的使用。他选择剥离它。我的解决方案将哈希添加到需要的位置，因此您不必担心将哈希传递到函数中。

.JS： 

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $('#'+ mainID).append('<li id=' + childID + '></li>');
    $('#'+ childID).append('<label for=' + labelFor + '>' + labelText + '</label>')
    $('<input>').attr({type: 'text', id: labelFor, name: labelFor}).appendTo('#'+ childID);
    $('#'+ childID).append('<span>' + spanText + '</span>');
}
createInputfield("dynamicForm", "psport", "sport", "Source port", "Enter the source port here (0-65535)");

演示：https://jsfiddle.net/hopkins_matt/6xyjawgs/

拿一个妈妈来说，这是我的代码，期望喜欢它，我将对象连接在数组中，然后将它们放在一起

function createInputfield(mainID, childID, labelFor, labelText, spanText){

    var elms = [
        $('<label for=' + labelFor + ' />').text(labelText),
        $('<input />').attr({type: 'text', id: labelFor, name: labelFor}),
        $('<span />').text(spanText)
    ];
    $('<li id=' + childID + '></li>').append(elms).appendTo('#'+ mainID)
}
createInputfield("dynamicForm", "psport", "sport", "Source port", "Enter the source port here (0-65535)");

希望你喜欢

相关文章：