Question

我是jQuery的新手，虽然我的代码主要完成了我想要的工作（在复制表单组中），但是按钮的类/值却遇到了几个问题：

单击时，附加到.formdupgroup的.btnadd会丢失其值，而不是上面没有'+'符号，它什么也不显示。

2。当重复的.btnadd类更改为.btnremove时，它们将HTML实体显示为按钮上的文本。它们不是完整的“ x”，而不是“ 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

您不需要转义+和×，因此只需将它们直接输入到函数中即可。

该值为空的原因是因为public string ImageSource1 => Windows.Storage.ApplicationData.Current.LocalFolder + "/Image_1.png"; public string ImageSource2 => Windows.Storage.ApplicationData.Current.LocalFolder + "/Image_2.png"; // invoke the NotifyPropertyChanged event to enforce an update. public void UpdateImages() { InvokePropertyChanged(nameof(ImageSource1)); InvokePropertyChanged(nameof(ImageSource2)); }属性正被此行重置：

val

TTY

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;

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

2 个答案: