一次僅隱藏/顯示一個DIV的功能

Question

我目前有一個JavaScript正在查看SharePoint列表，並撤回所有符合REST調用條件的項目。

當前，它創建DIV，並將其附加到包裝器DIV。 該按鈕的目的是顯示/隱藏子DIV。

現在，當我單擊生成的任何按鈕時，它將展開所有隱藏的div。 我要完成的工作是能夠單擊每個按鈕並使其嵌套的div顯示/隱藏。

這是我的代碼：

 var listName = "announcement"; var titleField = "Title"; var tipField = "Quote"; var dateFieldFrom = "DateFrom"; var dateFieldTo = "DateTo"; var category = "category"; var noteField = "note"; var query = "/_api/Web/Lists/GetByTitle('" + listName + "')/items?$select=" + titleField + "," + dateFieldTo + "," + dateFieldFrom + "," + category + "," + noteField + "," + tipField; var today = new Date(); var btnClass = "toggle" todayString = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); //This is the query filter string where we compare the values in the 2 date fields against the current date query += "&$filter=('" + todayString + "' ge " + dateFieldFrom + " ) and (" + dateFieldTo + " ge '" + todayString + "')";; var call = $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + query, type: "GET", dataType: "json", headers: { Accept: "application/json;odata=verbose" } }); call.done(function(data, textStatus, jqXHR) { var divCount = data.d.results.length; for (var i = 0; i < divCount; i++) { var tip = data.d.results[i][tipField]; //this is where it looks at the quote field to determine what quote to place in the current dynamically created DIV var cat = data.d.results[i][category]; //this is where it looks at the category field to determine what color to style the background of the current dynamically created DIV var message = data.d.results[i][noteField]; var ID = "NewDiv-" + i var PID = "P-" + i var BID = "btn-" + i // Create Message DIV var element = document.createElement("div"); //This is the creation of the dynamic DIV element.id = ID //This is assigning a DIV an ID element.appendChild(document.createTextNode(tip)); // Create Inner message DIV var innerDiv = document.createElement("div"); // Create a <div> element//New Code innerDiv.id = PID innerDiv.appendChild(document.createTextNode(message)); // Create button to show/hide the div var btn = document.createElement("BUTTON"); btn.id = BID btn.appendChild(document.createTextNode("show/hide message below")); btn.className = btnClass // Append Inner DIVs document.getElementById('wrapper').appendChild(element); //This is the parent DIV element that all newly created DIVs get created into document.getElementById(ID).appendChild(btn); // Append the button to the newly created DIV document.getElementById(ID).appendChild(innerDiv); //This is the message that appears after the newly created DIVs if (cat == 'Information') { document.getElementById(ID).style.backgroundColor = '#d9edf7'; //Blue Color document.getElementById(PID).style.backgroundColor = '#d9edf7'; //Blue Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#d9edf7'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-info" element.className = "alert alert-info" } if (cat == 'Warning') { document.getElementById(ID).style.backgroundColor = '#fcf8e3'; //Orange Color document.getElementById(PID).style.backgroundColor = '#fcf8e3'; //Orange Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#fcf8e3'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-warning" element.className = "alert alert-warning" } if (cat == 'Critical') { document.getElementById(ID).style.backgroundColor = '#f2dede'; //Red Color document.getElementById(PID).style.backgroundColor = '#f2dede'; //Red Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#f2dede'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-danger" element.className = "alert alert-danger" } } // The below variables and for loop ensure that all sub messages are initially hidden, until the show/hide button is clicked var curDiv var curID for (var i = 0; i < divCount; i++) { curID = "P-" + i curDiv = document.getElementById(curID) curDiv.style.display = 'none'; } // The function below is to assign an event to the button to show/hide the sub message var f = function(a) { var cDiv for (var z = 0; z < divCount; z++) { cDiv = "P-" + z var div = document.getElementById(cDiv); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } } return false; } var elems = document.getElementsByClassName("toggle"); var idx for (var i = 0, len = elems.length; i < len; i++) { elems[i].onclick = f; } }); 

 <div id="wrapper" class="header"> </div> 

Answer 1

您可以替換所有這些-遍歷所有div

// The function below is to assign an event to the button to show/hide the sub message
  var f = function(a) {
    var cDiv
    for (var z = 0; z < divCount; z++) {
      cDiv = "P-" + z
      var div = document.getElementById(cDiv);
      if (div.style.display !== 'none') {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
    return false;
  }
  var elems = document.getElementsByClassName("toggle");
  var idx
  for (var i = 0, len = elems.length; i < len; i++) {
    elems[i].onclick = f;
  }

這樣，它委派了包裝器中按鈕的單擊，並在按鈕之后切換下一個對象

$('#wrapper').on("click",".toggle",function(e) { // notice the delegation
  e.preventDefault(); // in case you forget type="button"
  $(this).next().toggle();
});

像這樣：

 $(function() { $('#wrapper').on("click", ".toggle", function(e) { e.preventDefault(); $(this).next().toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="wrapper"> <div id="NewDiv-0" class="alert alert-info" style="background-color: rgb(217, 237, 247);">Debbie Teng joins PD Tax!******** <button id="btn-0" class="toggle" style="background-color: rgb(217, 237, 247); border: none;">show/hide message below</button> <div id="P-0" class="alert alert-info" style="background-color: rgb(217, 237, 247); margin: 3px; display: none;">yadayada1​</div> </div> </div> 

Answer 2

您為所有按鈕分配了相同的onclick函數事件處理程序，該函數循環遍歷所有div並顯示或隱藏它們。

一種替代方法是讓事件處理程序僅切換與按鈕關聯的特定div。

首次創建按鈕時，可以立即為其分配事件處理程序，然后將引用傳遞給要隱藏的div：

var innerDiv = document.createElement("div");
innerDiv.id = PID
innerDiv.appendChild(document.createTextNode(message));
var btn = document.createElement("BUTTON");
// Immediately-invoked function expression to attach event handler to inner div:
(function(d){
    btn.onclick = function(){ f(d); };
})(innerDiv);

然后只需更新您的f函數，以接受要切換的div作為參數即可。

// The function below is to assign an event to the button to show/hide the sub message
function f(div){
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
    return false;
}

然后，您可以刪除將代碼分配給elems集合的最后幾行代碼，並循環遍歷該代碼以附加onclick函數。