javascript - 如何让 parent div 单击项目元素和模式上的类

Question

我知道这个问题被问过很多次，但他们没有帮助我。

我有一个场景，就像我点击了contenteditable=true的div，点击后我按下导航中的上传按钮来上传其中的图像。模式出现，图像应上传到所需的点击 div 中。

问题是我无法在模式出现时单击的特定 div 中上传图像，并且应该上传图像获取。

我使用 window.element 完成了此操作，但它现在不起作用，说:

类型错误:window.element 未定义

这是我的代码:

$(document).on("click", "#titleDescImage", function () {
        $('#titledescImgModal').modal('show');
    });

    $("#titledescImg-input").change(function () {
        $('#titledescImgModal').modal('hide');
        readImage(this, 'titledescImg');
    });

function readImage(input, check) {
    if (input.files && input.files[0]) {
        var FR = new FileReader();
        FR.onload = function (e) {
       if (check == 'titledescImg') {
                html = window.element.find("p").html();
                window.element.html(html + "<img src=" + e.target.result + " width=100 height=100/>");
            }
        };
        FR.readAsDataURL(input.files[0]);
    }
}

HTML 是:

    <div contenteditable="true" id="website-title" data-attr="heading"
 class="hidden-xs textEditor titleImg"><p style="text-align:center"><span
 style="font-size:36px"><span style="color:rgb(255, 0, 0)">Mohsin Site</span>
</span><br type="_moz"></p></div>

模态 HTML 是:

<div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="titledescImgModal" class="modal fade in" style="display: block; padding-right: 13px;">
    <div role="document" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                <h4 id="myModalLabel" class="modal-title">Upload Image</h4>
            </div>
            <div class="modal-body">
                <input type="file" id="titledescImg-input">
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

按钮 HTML:

 $('<button class="btn btn-default" id="titleDescImage" type="button"
 style="border-radius: 4px;float: right;margin-right: 45px;margin-top: 
-45px;"><span class="glyphicon glyphicon-picture"></span></button>');

Answer 1

没有什么比window.element更好的了。我猜您正在寻找 window.document。另外，既然您已经在使用 jQuery，为什么不这样编写代码:

var html = $(".textEditor.activeNow p").html();
$(".textEditor.activeNow p").html(html + "<img src=" + e.target.result + " width=100 height=100/>");

或者只是像这样附加 -

$(".textEditor.activeNow p").append("<img src=" + e.target.result + " width=100 height=100/>");

您需要一个单击/焦点事件处理程序来了解哪个文本编辑器处于事件状态

$('.textEditor').on('click',function() { //You can use 'focus' in place of 'click'
    $('.textEditor').removeClass('activeNow');
    $(this).addClass('activeNow');
});