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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 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"))?那行得通嗎?我嘗試這樣做,但沒有用。我怎樣才能做到這一點?我嘗試使用,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)驗 獲得超4個贊

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

不要在 for-loop 中添加事件,因為如果您選擇 3 個文件,您的第一個文件remove element將有 3 個點擊事件,第二個有 2 個,最后一個有一個

$(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>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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