HTML 使用 jQuery 克隆时显示编码的实体

Question

我是 jQuery 的新手，虽然我的代码主要做了我想要的（复制表单组），但我在 classes/values 中遇到了一些问题按钮数量：

单击后，附加到 .formdupgroup 的 .btnadd 将失去其值，而不是上面有一个“+”符号，它什么也不显示。

2.When 重复的 .btnadd 类更改为 .btnremove，它们将 HTML 实体显示为按钮上的文本。他们不是 'x' 符号，而是完整读作“×”。

我确定这些问题都与在这两种情况下解码 HTML 实体有关，但我找不到解决它的方法，除非求助于仅输入不均匀间隔的 'x' 和 '+' 字符。如何添加解码的 HTML 实体作为输入值？

$(function(){
    $(document).on('click','.btnadd',function(e){
        e.preventDefault();

        var controlForm = $(this).parents('.formdupgroup:first'),
            currentEntry = $(this).parents('.toduplicate:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            newEntry.find('select').prop('selectedIndex',0);
            controlForm.find('.btnadd:not(:last)')
                .removeClass('btnadd').addClass('btnremove')
                .removeClass('btn-success').addClass('btn-danger')
                .val('&times;');
    }).on('click','.btnremove', function(e){
        $(this).parents('.toduplicate:first').remove();

        e.preventDefault();
        return false;
    });
});

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
        <form>
            <div class='formdupgroup'>
                <div class='form-row toduplicate'>
                    <div class='col-md-2'>
                    </div>
                    <div class='form-group col-md-8'>
                        <label for='selectexample' class='sr-only'>Select Example</label>
                        <select name='selectexample' class='form-control'>
                            <option value='' disabled selected>Please Select an Option</option>
                            <option value='1'>Option 1</option>
                            <option value='2'>Option 2</option>
                            <option value='3'>Option 3</option>
                            <option value='4'>Option 4</option>
                            <option value='5'>Option 5</option>
                            <option value='6'>Option 6</option>
                            <option value='7'>Option 7</option>
                            <option value='8'>Option 8</option>
                            <option value='9'>Option 9</option>
                            <option value='10'>Option 10</option>
                        </select>
                    </div>
                    <div class='col-md-2'>
                        <input type='button' class='btn btn-success btnadd' value='&plus;'>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>
</body>
</html>

Answer 1

您不需要对 + 和 × 进行转义，因此您可以直接将它们输入到您的函数中。

该值为空白的原因是因为 val 属性被此行重置：

newEntry.find('input').val('');

Here's a working JSFiddle.

Answer 2

.val('×'); 不放 "x" 的原因是 javascript 本身不解析这些 html 代码。您需要指定它必须被解析。

这是在 javascript/jquery 中使用 html 代码的工作模型。

$(function(){
 var parser = new DOMParser;
    $(document).on('click','.btnadd',function(e){
        e.preventDefault();

        var controlForm = $(this).parents('.formdupgroup:first'),
            currentEntry = $(this).parents('.toduplicate:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val(parser.parseFromString('&plus;', 'text/html').body.textContent);
            newEntry.find('select').prop('selectedIndex',0);
            controlForm.find('.btnadd:not(:last)')
                .removeClass('btnadd').addClass('btnremove')
                .removeClass('btn-success').addClass('btn-danger')
                .val(parser.parseFromString('&times;', 'text/html').body.textContent);
    }).on('click','.btnremove', function(e){
        $(this).parents('.toduplicate:first').remove();

        e.preventDefault();
        return false;
    });
});

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
        <form>
            <div class='formdupgroup'>
                <div class='form-row toduplicate'>
                    <div class='col-md-2'>
                    </div>
                    <div class='form-group col-md-8'>
                        <label for='selectexample' class='sr-only'>Select Example</label>
                        <select name='selectexample' class='form-control'>
                            <option value='' disabled selected>Please Select an Option</option>
                            <option value='1'>Option 1</option>
                            <option value='2'>Option 2</option>
                            <option value='3'>Option 3</option>
                            <option value='4'>Option 4</option>
                            <option value='5'>Option 5</option>
                            <option value='6'>Option 6</option>
                            <option value='7'>Option 7</option>
                            <option value='8'>Option 8</option>
                            <option value='9'>Option 9</option>
                            <option value='10'>Option 10</option>
                        </select>
                    </div>
                    <div class='col-md-2'>
                        <input type='button' class='btn btn-success btnadd' value='&plus;'>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

这也适用于 html 键盘上没有出现的代码。例如 &spades;

HTML 使用 jQuery 克隆时显示编码的实体

HTML Entities Displaying Encoded when Cloned with jQuery

javascript

jquery

html-entities