根据使用JavaScript的SharePoint REST API的点击更改div html

问题描述

这适用于从SharePoint列表中提取数据，问题是：如何向下传递单击的按钮的this.className（或使用下一个按钮在列表中获取项目2的某种方式）。我需要从data.d.results [1]中提取第二个按钮的数据，依此类推。现在我只是因为没有定义classOfButton而报错（因为this.className没有成功传递：onQuerySucceeded（）。

在页面顶部，我有两个按钮：

<div id="buttonMaster">
<a class="product01">Product 1</a>
<a class="product02">Product 2</a>
</div>

我正在使用API​​从SharePoint 2013列表中提取信息：

const Productbuttons = document.querySelectorAll('#buttonMaster a');
for (const ProductButton of Productbuttons) {
ProductButton.addEventListener('click',function(event) {
getListData(this.className);
})
}

function getListData() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + /_api/web/lists/getByTitle('TestProductConstruct')/items;
$ajax({
url: fullUrl,type: "GET";
headers: {
   "accept": "Appplication/json;odata=verbose","content-type": "application/json;odata=verbose",succes: onQuerySucceeded,error: onQueryFailed
}
});

function onQuerySucceeded(data) {
 var classOfButton = this.className;
 switch(true) {
 case classOfButton.contains('Product01');
 const product1 = data.d.results[0];
 $('step1Info').html(product1.Phase);
 $('step2Info').html(product1.Step);
 break;
 case classOfButton.contains('Product02');
 const product2 = data.d.results[1];
 $('step1Info').html(product2.Phase);
 $('step2Info').html(product2.Step);
 break;
 }
}

function onQueryFailed() {
alert('Error');
}

谢谢， 瑞安

解决方法

好的，找到了一个反复试验的答案。这是我在一天中发现和更改的东西的混合体，因此并不美观，我会在更新时进行更新。

const Productbuttons = document.querySelectorAll('#buttonMaster a');
for (const ProductButton of Productbuttons) {
ProductButton.addEventListener('click',function(event) {
var buttonClass = Productbutton.getAttribute('class');
getListData(buttonClass);
})
}

function getListData(buttonClass) {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + /_api/web/lists/getByTitle('TestProductConstruct')/items;
  $ajax({
  url: fullUrl,type: "GET";
  headers: {
   "accept": "Appplication/json;odata=verbose","content-type": "application/json;odata=verbose",success: function(data) {
  switch(true) {
  case buttonClass === "product01":
  var xid = data.d.results[0];
  $(".step1Info").html(xid.Phase);
  $(".step2Info").html(xid.Step);
  break;
  case buttonClass === "product02":
  var xid = data.d.results[1];
  $(".step1Info").html(xid.Phase);
  $(".step2Info").html(xid.Step);
  break;
   }
  },error: onQueryFailed
  }
 },function onQueryFailed() {
console.log('Error');
}

谢谢， 瑞安

,

好的，您的代码存在som问题：

• 首先，使用数据属性实现功能，并保留类用于样式。如果有人删除或重命名您的班级，则您的代码已损坏。顺便说一句，您可以通过此传递一些有用的数据
• 因此switch/case不再需要。您可以在onQuerySucceeded()
中使用此数据
• 我不知道它如何处理您的ajax调用。在jQuery中，您可以调用$.ajax()而不是$ajax()
• fullURL大小写不正确：fullUrl
• 我认为fullURL无效。您用不正确的方式将变量与字符串和函数调用组合在一起。您可以改用字符串文字： `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/${getByTitle('TestProductConstruct')}/items` 或基本字符串串联： _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists/' + getByTitle('TestProductConstruct') + '/items'

这是我的最终代码：

<div id="buttonMaster">
  <a class="product" data-product="0">Product 1</a>
  <a class="product" data-product="1">Product 2</a>
</div>

const products = document.querySelectorAll('[data-product]')
products.forEach(product => {
  product.addEventListener('click',(ev) => {
    getListData(ev.target)
  })
})

const getListData = (element) => {
  const fullURL = `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/${getByTitle('TestProductConstruct')}/items`

  $.ajax({
    url: fullURL,type: "GET",headers: {
      "accept": "Appplication/json;odata=verbose",succes: (data) => {
      onQuerySucceeded({ data,element })
    },error: onQueryFailed
    }
  })
}

const onQuerySucceeded = ({ data,element }) => {
  const product = data.d.results[element.dataset.product]
  $('.step-1').html(product.Phase)
  $('.step-2').html(product.Step)
}