第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 insertAfter() 中使用 $(this).find('class')

在 insertAfter() 中使用 $(this).find('class')

catspeake 2023-04-20 16:29:20
我有以下代碼可以查看下上傳的圖片<input type="file"$(document).on("change", ".files", function(e) {        var files = e.target.files,            filesLength = files.length;            $(this).find('.pip').remove();        for (var i = 0; i < filesLength; i++) {            var f = files[i]            var fileReader = new FileReader();            fileReader.onload = (function(e) {            var file = e.target;                       $("<span class=\"pip\">" +                "<img class=\"imageThumb\" src=\"" + e.target.result + "\">" +                "<br/><span class=\"remove\"><i class='fa fa-times-circle'></i></span>" +                "</span>").insertAfter(".file-upload");            $(".remove").click(function(){                $(this).parent(".pip").remove();            });                        });            fileReader.readAsDataURL(f);        }        });file-upload單擊按鈕即可復(fù)制該類。所以我想像這樣定位當(dāng)前的 div insertAfter($(this).find(".file-upload"))?那行得通嗎?我嘗試這樣做,但沒有用。我怎樣才能做到這一點(diǎn)?我嘗試使用,append但這也無濟(jì)于事。編輯 我的 HTML<div class="medi">   <div class="file-upload">      <input type="file" class="files" name="images[]" multiple="">      <img src="/upload.png" style="position: relative;top: 11px;height: 16px;width: 16px;margin-left: 8px;">      <span class="upload-text">Upload</span>   </div></div>本節(jié)重復(fù)。
查看完整描述

1 回答

?
犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

在你的代碼中this引用輸入,所以你需要找到最近的?.file-upload父母,你可以使用父母但你需要保持那個(gè)結(jié)構(gòu)(我更喜歡最近)

不要在 for-loop 中添加事件,因?yàn)槿绻x擇 3 個(gè)文件,您的第一個(gè)文件remove element將有 3 個(gè)點(diǎn)擊事件,第二個(gè)有 2 個(gè),最后一個(gè)有一個(gè)

$(document).on("change", ".files", function (e) {

? ? var files = e.target.files,

? ? ? ? ? ? filesLength = files.length;

? ? //this reffer's to <input type="file" class="files" .. so you need to get closest parent .file-upload

? ? let div = $(this).closest(".file-upload");

? ? $(div).find('.pip').remove();

? ? for (var i = 0; i < filesLength; i++) {

? ? ? ? var f = files[i]

? ? ? ? var fileReader = new FileReader();

? ? ? ? fileReader.onload = (function (e) {

? ? ? ? ? ? var file = e.target;

? ? ? ? ? ? $("<span class=\"pip\">" +

? ? ? ? ? ? ? ? ? ? "<img class=\"imageThumb\" src=\"" + e.target.result + "\">" +

? ? ? ? ? ? ? ? ? ? "<br/><span class=\"remove\"><i class='fa fa-times-circle'></i></span>" +

? ? ? ? ? ? ? ? ? ? "</span>").insertAfter($(div));

? ? ? ? });

? ? ? ? fileReader.readAsDataURL(f);

? ? }

? ? $(div).find(".remove").click(function () {

? ? ? ? $(this).parent(".pip").remove();

? ? });

});

img {

? ? max-width: 80px;

? ? max-height: 80px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="medi">

? ? <div class="file-upload">

? ? ? ? <input type="file" class="files" name="images[]" multiple="">

? ? ? ? <img src="/upload.png" style="position: relative;top: 11px;height: 16px;width: 16px;margin-left: 8px;">

? ? ? ? <span class="upload-text">Upload</span>

? ? </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-20
  • 1 回答
  • 0 關(guān)注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)