如何在隐藏内容后刷新一个div

Question

I have the following code:

// 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()等方法，但都没有奏效。

- Plexis Plexis

---

你希望隐藏内部元素后，它们能够对齐以避免留下空白吗？ - Martin

@Plexis Plexis，我的意思是将您的选择放在一个完全独立的文件中，通过GET请求通过AJAX加载它。然后执行您需要执行的任何操作，通过另一个GET请求解析逻辑（可以用来逻辑地应用您希望应用于选择菜单的任何功能）。这将刷新您的选择菜单，并希望正确显示它。 - Martin

@PlexisPlexis 你好，能否看一下这个 jsfiddle：https://jsfiddle.net/GameTag/pgL1v368/ 我认为它会对你有所帮助，如果不行请告诉我原因。 - GameTag

@GameTag，小提琴很好用！出了什么问题，你能解释一下吗？ - Plexis Plexis

@PlexisPlexis 你的变量 ary 的选择器对我不起作用。通常我喜欢使用jQuery的工具来操纵not和data，因此我创建了一个jQuery集合来存储原始列表，并在输入keyup时操纵每个项目。 - GameTag

Answer 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');
    });
});

- Mandar Dhadve

---

我该如何指定要设置/取消设置的项目。 - Plexis Plexis

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

我稍微修改了给定的代码片段，试图实现一个可工作的代码。

你的问题是，不太清楚idProp或nameProp是什么（所以我自己决定了）。

你将面临另一个问题：

你隐藏了一些东西，但永远无法找回它们。一旦复选框被隐藏，它就永远消失了。

- flx

---

idprop和nameprop用于分别设置复选框的值和文本。 - Plexis Plexis

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

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(); } var ary = $("label:not([data-value*='" + enteredText.toLowerCase() + "'])"); for (var i = 0; i < ary.length; i++) { $("#" + ary[i]["id"]).hide(); } - Plexis Plexis