如何使我的多个按钮和功能可扩展答案

【问题标题】：How can I make my multiple buttons and functions expandable如何使我的多个按钮和功能可扩展
【发布时间】：2023-02-18 12:34:22
【问题描述】：

我创建了一个函数，用于在选择/单击按钮时将不同的特定单词添加到 Sharepoint，但脚本不可扩展。当需要将另一组词添加到 SharePoint 列表时，如何使多个按钮的功能和功能更具扩展性和增长性。没有越来越多的按钮和功能列表会很好。我的工作但不是高效/可扩展的代码如下。我很感激我能在这个问题上得到的帮助。

$(document).ready(function(){
jQuery(document).on("click", '.picture1', function(){
        InsertItem1();
    });
    
jQuery(document).on("click", '.picture2', function(){
        InsertItem2();
    });
jQuery(document).on("click", '.picture3', function(){
        InsertItem3();
    });
    
jQuery(document).on("click", '.picture4', function(){
        InsertItem4();
    });
});

function InsertItem1() { updateData("Selected"); }
function InsertItem2() { updateData("Field-3"); }
function InsertItem3() { updateData("Field-2"); }
function InsertItem4() { updateData("Field-1"); }
 


function updateData(viewhit) {
    var restendpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Views')/items";
    $.ajax({
        url: restendpoint,
        type: "POST",
        data: JSON.stringify({
            __metadata: {
                type: "SP.Data.ViewsListItem"
            },
            Title: "Podcast",
            Views: viewhit
        }),
        headers: {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "X-HTTP-Method": "POST"
        },
        success: function() {
            console.log("Item added to the SharePoint list");
        },
        error: function() {
            console.log("Error Occurred!");
        }
    });
}

【问题讨论】：

这个jQuery(document).on("click", '.picture1', function(){ InsertItem1(); });可以缩短为$('.picture1').on('click', function() { updateData('Selected'); });
为了澄清，你的可扩展的意味着一个灵活/可重用的功能，它只声明一次并且能够处理一组单词？
您好 Zeikman，感谢您的快速回复和代码更改。是的，我希望我的脚本更加灵活/可重复使用，以适应将添加到 SharePoint 列表中的特定单词的不断增长的列表。我希望这能更好地阐明我的目标。再次感谢您的协助。
好的，我会尽力帮助您 :) 想让自己更清楚，您的元素可点击元素是否具有相同的命名模式，如 .picture1、.picture2` 等等？
听起来不错。如果需要不同的名称模式，我可以更改它们。我使用旧代码来创建这个概念。我让它工作了，现在我想清理它并使其灵活/可重用。非常感谢您的帮助。

标签： javascript jquery sharepoint

【解决方案1】：

尽我所能将您的代码重组为更具扩展性/可重用性的方式。

我的方法是首先选择所有类名以命名picture开头的元素，

$('[class^=picture]')

然后一次性注册事件监听器，并根据元素的类名使用switch条件抽动参数，如下所示，不确定它是否符合您的条件。

$('[class^=picture]').on('click', function(e) {
  const elementClass = $(this).attr('class');
  let viewHit;
  
  switch(elementClass) 
  {
    case 'picture1':
      viewHit = 'Selected';
      break;
      
    case 'picture2':
      viewHit = 'Field-3';
      break;
      
    case 'picture3':
      viewHit = 'Field-2';
      break;
      
    case 'picture4':
      viewHit = 'Field-1';
      break;
      
    case 'default':
      break;
  }
  
  updateData(viewHit);
});

function updateData(viewhit) { alert(viewhit); }

[class^=picture] {
  border: 1px dashed black;
  padding: 3px 6px;
  margin: 5px;
  cursor: pointer;
}

[class^=picture]:hover {
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="picture1">Picture 1</div>
<div class="picture2">Picture 2</div>
<div class="picture3">Picture 3</div>
<div class="picture4">Picture 4</div>

希望对您有所帮助，祝您编码愉快！

【讨论】：