Question

我目前正在做类似于StackOverflow系统的事情，它显示了Markdown转换为HTML时的答案。与此问题相关的HTML部分是

<form method='post' class='form-horizontal' role='form'>
    {{csrf_field()}}
    <textarea name="question" id="test" data-iconlibrary="fa" data-provide="markdown" spellcheck='false' rows="10" data-hidden-buttons="cmdPreview cmdHeading cmdCode"></textarea>
    <div id='result' style='border:1px solid grey; border-radius:5px;'></div>
    <input type='submit'>
</form>

还有jQuery

$('textarea[name=question]').keyup(function() {
    $.post('{{url("web/questions/showPost")}}',{question:$(this).val(),_token:$('input[name=_token]').val()},
        function(result) {
            $('#result').html(result);
        });
    //DOES NOT WORK
    var parentEls = $( "img" ).parents()
        .map(function() {
            return this.id;
        }).get().join(", ");
    alert(parentEls);
});

正如您所看到的，我向{Laravel方法$.post请求并从那里转换为HTML Markdown。一切都很完美。 我实际上要做的是是将img-responsive引导程序类添加到我的结果div div#result内的所有图像。

我知道最简单的方法就是编辑我使用的PHP转换器（GrahamCampbell/Laravel-Markdown）并添加我想要的东西，但因为我使用Laravel它真的很糟糕想要编辑供应商文件，因为更新后一切都将丢失。所以，我的想法是以某种方式用jQuery添加该类img-responsive。它首先看起来很简单，因为我认为我可以使用简单的div p img选择器完成所有操作，但后来我意识到用户需要一个更加灵活的系统，即使他们写了类似的东西也会添加该类div p a strong em img。所以，我的第一个想法是让所有父母都来自所有img标签并检查，如果父母的身份证明为result，这就是我在该评论下尝试做的事情 //DOES NOT WORK 即可。实际上，在那里我只是试图获取父母名单（我想如果我得到它我会修复所有内容），但这段代码只返回给我第一个img父母 - 所以，我的标志的父母。 ...

也许有人知道，我该怎么做才能添加该课程或如何获得父母列表？不仅我的解决方案，其他解决方案将受到高度赞赏（我相信有一个比我的更好的解决方案来添加该类）。如果您也了解Laravel的解决方案，而无需编辑供应商，那就更好了。

对不起，如果我错过了我的问题的答案。我的英语不允许我在短时间内提出问题。

感谢您的帮助。

修改

我能让它发挥作用的唯一方法（感谢那些评论我的帖子的人，因为他们指出了问题！）是为了制作一个额外的隐藏div，我在其中存储我从PHP获得的数据，然后是延迟将类添加到img，然后只放入可见的div。另外，因为它实际上很慢，所以我决定不更新keyup，而是点击preview按钮。那就是我现在的代码

$(document).on('click','#preview',function() {
    $.post('{{url("web/questions/showPost")}}',{question:$('textarea[name=question]').val(),_token:$('input[name=_token]').val()},
        function(result) {
            $('#hiddentResult').html(result);
            setTimeout(addImgResponsive,100);
        });
});
function addImgResponsive() {
    $('#hiddentResult').find('img').addClass('img-responsive');
    $('#result').html($('#hiddentResult').html());
}

有没有办法使用额外的div修复它without？我使用延迟的原因是因为$('#hiddentResult').find('img').addClass('img-responsive');执行得太早......

Answer 1

所以，问题在于这个家伙

$('#hiddentResult').find('img').addClass('img-responsive');

与此同步工作

$.post('{{url("web/questions/showPost")}}',{question:$('textarea[name=question]').val(),_token:$('input[name=_token]').val()},
    function(result) {
        $('#hiddentResult').html(result);
    });

并首先执行，在第二个从PHP获得结果之前，我没有看到任何效果，因为没有加载数据。添加此功能后

function addImgResponsive() {
    $('#hiddentResult').find('img').addClass('img-responsive');
    $('#result').html($('#hiddentResult').html());
}

并将其放入setTimeout(addImgResponsive,0);以使其异步工作，现在一切正常。谢谢， Roamer-1888 和 RAHUL S R

修改我的整个解决方案看起来像这样：

jQuery的：

$(document).on('click','#preview',function() { $.post('{{url("web/questions/showPost")}}',{question:$('textarea[name=question]').val(),_token:$('input[name=_token]').val()}, function(result) { $('#hiddentResult').html(result); setTimeout(addImgResponsive,0); }); }); function addImgResponsive() { $('#hiddentResult').find('img').addClass('img-responsive'); $('#result').html($('#hiddentResult').html()); }

HTML：

<form method='post' class='form-horizontal' role='form'> {{csrf_field()}} <textarea name="question" id="test" data-iconlibrary="fa" data-provide="markdown" spellcheck='false' rows="10" data-hidden-buttons="cmdPreview cmdHeading cmdCode"></textarea> <div id='result'></div> <div id='hiddentResult' class='hidden'></div> <input type='submit'> <input type='button' id='preview' value = 'Peržiūrėti'> </form>

将图像添加到图像中，该图像是div的子图像，可能包含其他标记

1 个答案: