Question

我有以下代码：

＆＃13;

// 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();
}

＆＃13;

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

＆＃13;

问题是隐藏了一些元素后div的内容没有正确重绘。检查图片：

Before hiding elements

When hiding elements, see the gaps

我该如何刷新div？我试图使用hide（）和show（），fadein（）。但是没有用。

Answer 1

chrome.storage.local.get({'itemList':[]}, function(item){
    var newItemList = item.itemList;
    var d = new Date();

    if (isItemInArray(newItemList,item) == -1) {
      //api call function as callback

      apiCall(function(result){
          newItemList.push([item,d.getHours(),result]);
          chrome.storage.local.set({itemList: newItemList});
      });

    } else {
      var indexOfitem = findItem(newItemList,item);//finding item in the array
      if(//some condition){

        apiCall(function(result){
            newItemList[indexOfTab][1] = d.getHours();
            newItemList[indexOfTab][2] = result;
            chrome.storage.local.set({itemList: newItemList});
        });

      } else {
        var indexOfitem = findItem(newItemList,item);
        storedApiCall(newItemList[indexOfTab][2]);//sending the stored JSON response
      }
    }
})

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

我已经更新了给定的代码片段以尝试实现正常工作的代码。

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

您将面临的另一个问题是：

你确实隐藏了东西，但是你永远都不会收回它。一旦复选框被隐藏，它就会消失。

隐藏内容后如何刷新div

2 个答案: