Question

我有多个函数一遍又一遍地执行相同的操作，但是从外部JSON文件传递了不同的对象数据。这些数据称为Data1，Data2和Data3，我已将它们声明为Data1_Data，Data2_Data和Data3_Data的变量。

我想知道如何组合这些函数，以便我可以编写一个传递相应JSON数据对象的函数。

背景信息：因此，函数循环遍历外部JSON数据集（数量巨大），并将第n个信息显示给分配的ID。每个函数当前都分配给JSON文件中的特定数据对象，如下例所示：Data1，Data2和Data3。

JSfiddle可以在https://jsfiddle.net/3mL0d6Lb/

找到

<div class="Dboxes">
<span class="Title"> Data1/Data2 </span>
    <div class="TableContainer">
        <div class="Value"> 
            <span id="Data1" class="metrics">##</span>
        </div>
    </div>
    <div class="TableContainer">
       <div class="Value"> 
       <span id="Data2" class="metrics">##</span> 
       </div>
    </div>
    <div class="TableContainer">
        <div class="Value"> 
        <span id="Data3" class="metrics">##</span> 
        </div>
     </div>

.Dboxes {
            width: 140px;
            height: 140px; 
            background: linear-gradient(#00395c 0%, #000000 50%, #00395c 100%);
            padding-top: 2px;
            padding-left: 2px;
            display: inline-block;
            margin: 0px 0px 1px 0px;
            position:relative;
            color: white;
        }

.Value
{
  text-align: center;
  font-size: 1.0vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


.TableContainer
{
  display: flex;
  align-items:center;
  height: 25px;
}
.TitleImage
{
    width: 24px;
    height: 24px;
    margin-left: 5%;
}
.container {
  height: 100%; 
  width: 100%;
  display: inline-block;
}

JavaScript的

// Setting up the Json 
var counter = 0; // Trial 
var previous_value = null;

$(document).ready(function () {       

  $.ajaxSetup({ cache: false });

       myJson();

    });

// Below is the function to draw data from Json        
function myJson() {

    $.getJSON("Dataset.json", function (response) {

        var i = 1380; //start demo at last hour of data.

        var looping = setInterval(function () {
        var TrialCount = response.length;
            var Info = response[counter];
            var Data1_Data = Info.Data1;
            var Data2_Data = Info.Data2;
      var Data3_Data = Info.Data3;

            CompareData1();
            CompareData2();
      CompareData3();

            function CompareData1() {
                if (counter == 0) {
                    prev_Data1_Data = Data1_Data; 
                }
                if (Data1_Data > prev_Data1_Data) {
                    if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data / 2 ))
                    document.getElementById("Data1_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data / 2))
                        document.getElementById("Data1_img").src = "img/grnsqr.png";
                }
                else if (Data1_Data < prev_Data1_Data) {
                    if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data / 2))
                    document.getElementById("Data1_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data / 2))
                        document.getElementById("Data1_img").src = "img/grnsqr.png";
                }
                prev_Data1_Data = Data1_Data;
            }

            function CompareData2() {
                if (counter == 0) {
                    prev_Data2_Data = Data2_Data;
                }
                if (Data2_Data > prev_Data2_Data) {
                    if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data / 2 ))
                    document.getElementById("Data2_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data / 2))
                        document.getElementById("Data2_img").src = "img/grnsqr.png";
                }
                else if (Data2_Data < prev_Data2_Data) {
                    if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data / 2))
                    document.getElementById("Data2_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data / 2))
                        document.getElementById("Data2_img").src = "img/grnsqr.png";
                }

                prev_Data2_Data = Data2_Data;
            }

      function CompareData3() {
                if (counter == 0) {
                    prev_Data3_Data = Data3_Data;
                }
                if (Data3_Data > prev_Data3_Data) {
                    if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data / 2 ))
                    document.getElementById("Data3_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data / 2))
                        document.getElementById("Data3_img").src = "img/grnsqr.png";
                }
                else if (Data3_Data < prev_Data3_Data) {
                    if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data / 2))
                    document.getElementById("Data3_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data / 2))
                        document.getElementById("Data3_img").src = "img/grnsqr.png";
                }

                prev_Data3_Data = Data3_Data;
            }

            document.getElementById("Data1").innerHTML = Data1_Data
            document.getElementById("Data2").innerHTML = Data2_Data
            document.getElementById("Data3").innerHTML = Data3_Data

            counter++;
            if (counter == TrialCount) clearInterval(looping);

        }, 100);
    });
};

Answer 1

您可以使用Info对象上的 Here's a full spec of identifier rules 来遍历其中的属性，而不是单独使用它。

CompareData(Info);

for(data in Info){
    if (Info.hasOwnProperty(data)) {
        CompareData(data, info[data]);
    }
}

function CompareData(data, data_value){
    // Modify your code here
}

我在CompareData函数上发表评论的原因是您当前使用以下变量的方式：Data_#_Data和prev_Data#_Data，其中＃表示1,2或3 ，请允许我详细说明......

我相信您可以使用data_value代替使用这些变量，即info[data]。因此，通过使用我提供的代码，在CompareData函数内部，我们可以使用传入的对象属性data，为简单起见，现在将其命名为data，以便确定哪个数据（1 ，2或3）我们正在处理。

我还通过info[data]传递了这个属性的值，这样我们就不需要在函数本身内担心它......你可以随时改变它。

现在您已在函数中获得了相关信息，您只需要进行简单的检查：if(data === "Data1")以检查您正在处理的数据。实现它将是这样的：

if(data === "Data1"){
    // ... some code before
    document.getElementById("Data1_img").src = "img/grnsqr.png";
    // ... some code after
}

这将允许您使用针对每个属性的特定代码，而不会复制周围的代码，这是您关心的问题。如果你看一下下面的代码，它就是你可以用这个实现做什么的一个例子...但请记住，我不是为你编写完整的代码，因为我将最终的实现留给你和你自己编码风格。

function CompareData(data, data_value){
     var prev_data = 0;

     if (counter == 0) {
         prev_data = data_value; 
     }

     if (data_value > prev_data) {
         if ((Math.abs(data_value - prev_data) >= prev_data / 2 ))
             if(data === "Data1"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             else if(data === "Data2"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             // ... Etcetera....
         }
     }
 }

如果您有任何问题，请随时在下面的评论中提问。如果您的代码正常运行并希望对其进行优化，我强烈建议您转到 for each function 并在那里发布您的代码。

JavaScript：结合类似的功能

1 个答案: