隐藏内容后如何刷新div

Posted 2023-03-06

【中文标题】隐藏内容后如何刷新div

【英文标题】：How to refresh a div after hiding contents

【发布时间】：2018-11-06 18:28:45

【问题描述】：

我有以下代码：

// 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的内容没有正确重绘。查看图片：

Before hiding elements

When hiding elements, see the gaps

我应该如何刷新 div？我尝试使用 hide() 和 show()，fadein()。但没有用。

【问题讨论】：

你能举一个 JSON 数据的例子吗？

您是否希望内部元素在隐藏后排成一行，以便没有空白空间？

@Martin 完全正确

@zeropublix ["EnName":"设备关联人员","ArName":"设备关联人员","状态":false,"项目":"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"]

您可以完全删除元素而不是隐藏它们，看看是否能正确重绘。如果没有，您可能必须使用已删除的部分刷新元素。 IE。通过 AJAX。

【参考方案1】：

试试这样的

$(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');
    );
);

【讨论】：

如何指定要设置/取消设置的项目

【参考方案2】：

// 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>

我已经稍微更新了给定的 sn-p 以尝试实现工作代码。

您的问题是，它并不清楚idProp 或nameProp 是什么（所以我自己决定）。

你将面临的另一个问题：

你确实隐藏了一些东西，但你永远不会把它找回来。一旦复选框被隐藏，它就永远消失了。

【讨论】：

idprop 和 nameprop 分别用于设置复选框及其文本的值

谢谢，现在在 multiSelectDialog_Search_TextChanged() 中的项目应该被隐藏，我已经提交了我在其中使用的代码

var enterText = $("#MultiSelectDialog_Search").val(); var ary = $("input[type='checkbox']:not([data-value*='" + enteredText.toLowerCase() + "'])"); for (var i = 0; i