簡體   English   中英

隱藏內容后如何刷新div

[英]How to refresh a div after hiding contents

我有以下代碼:

 // I am filling the data of the "MultiSelectDialog_List" div using javascript like this: var s = ''; // JSON string ----- YOU NEED TO ADD AN EXAMPLE OF S var jsonData = JSON.parse(s); for (var i = 0; i < jsonData.length; i++) { // Hold the original list $("#MultiSelectDialog_List").append("<input type='checkbox' id ='" + jsonData[i][idProp] + "' value='" + jsonData[i][idProp] + "' data-value='" + jsonData[i][nameProp].toLowerCase() + "' > <label data-value ='" + jsonData[i][nameProp].toLowerCase() + "' id ='lbl" + jsonData[i][idProp] + "'>" + jsonData[i][nameProp] + "</label> <br/>"); } // Then I am using this script to hide some content: var enteredText = $("#MultiSelectDialog_Search").val(); var ary = $("input[type='checkbox']:not([data-value*='" + enteredText.toLowerCase() + "'])"); for (var i = 0; i < ary.length; i++) { $("#" + ary[i]["id"]).hide(); }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="multiSelectDialog" title="Select"> <input type="text" id="MultiSelectDialog_Search" name="MultiSelectDialog_Search" onchange="multiSelectDialog_Search_TextChanged()" /> <div id="MultiSelectDialog_List" data-value=""> <!--The data will goes here--> </div> <input type="hidden" name="MultiSelectDialog_Values" id="MultiSelectDialog_Values" /> <button id="MultiSelectDialog_Submit" onclick="multiSelectDialog_SubmitButton_Click()">Submit</button> </div>

問題是隱藏了一些元素后,div的內容沒有正確重繪。 檢查圖像:

隱藏元素之前

隱藏元素時,查看間隙

我應該如何刷新div? 我嘗試使用 hide() 和 show()、fadein()。 但沒有用。

嘗試這樣的事情

$(document).ready(function(){
    // use localStorage.removeItem('show'); to unset an item
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#MultiSelectDialog_List').show();
    }
    
    $("#btn").click(function(event){
        event.preventDefault();
        $('#MultiSelectDialog_List').show();
        localStorage.setItem('show', 'true');
    });
});

 // I am filling the data of the "MultiSelectDialog_List" div using javascript like this: var s = '[{"EnName":"Device Linked Officer","ArName":"Device Linked Officer","Status":false,"Project":"CMS","ID":"ROL29","IsOrderNumRequired":true,"IsTimeInterval":false,"IsHealthCare":true,"isBiller":false},{"EnName":"pharmacist","ArName":"pharmacist","Status":false,"Project":"CMS","ID":"ROL30","IsOrderNumRequired":true,"IsTimeInterval":false,"IsHealthCare":true,"isBiller":false},{"EnName":"Store & Pharmacy","ArName":"Store & Pharmacy","Status":false,"Project":"CMS"}]'; // JSON string ----- YOU NEED TO ADD AN EXAMPLE OF S var jsonData = JSON.parse(s); var idProp = 'ID'; var nameProp = 'EnName'; for (var i = 0; i < jsonData.length; i++) { // Hold the original list $("#MultiSelectDialog_List").append("<input type='checkbox' id ='" + jsonData[i][idProp] + "' value='" + jsonData[i][idProp] + "' data-value='" + jsonData[i][nameProp].toLowerCase() + "' > <label data-value ='" + jsonData[i][nameProp].toLowerCase() + "' id ='lbl" + jsonData[i][idProp] + "'>" + jsonData[i][nameProp] + "</label> <br/>"); } // Then I am using this script to hide some content: function multiSelectDialog_SubmitButton_Click() { var enteredText = $("#MultiSelectDialog_Search").val(); var ary = $("input[type='checkbox']:not([data-value*='" + enteredText.toLowerCase() + "'])"); for (var i = 0; i < ary.length; i++) { $("#" + ary[i]["id"]).hide(); } } function multiSelectDialog_Search_TextChanged() { // TODO }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="multiSelectDialog" title="Select"> <input type="text" id="MultiSelectDialog_Search" name="MultiSelectDialog_Search" onchange="multiSelectDialog_Search_TextChanged()" /> <div id="MultiSelectDialog_List" data-value=""> <!--The data will goes here--> </div> <input type="hidden" name="MultiSelectDialog_Values" id="MultiSelectDialog_Values" /> <button id="MultiSelectDialog_Submit" onclick="multiSelectDialog_SubmitButton_Click()">Submit</button> </div>

我已經稍微更新了給定的代碼片段以嘗試實現工作代碼。

你的問題是,它並不清楚idPropnameProp是什么(所以我自己決定)。

您將面臨的另一個問題:

你確實隱藏了東西,但你永遠不會找回它。 一旦復選框被隱藏,它就永遠消失了。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM