Question

我目前有一个查看SharePoint列表的JavaScript，并撤回符合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();
});

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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函数。

一次隐藏/显示一个DIV的功能

2 个答案: