基于json查找更改列表项的背景

Question

我们的分会需要在输入字段中键入成员，并根据支持的json文件中的名称查找更改父li背景颜色。我更喜欢jquery解决方案，但javascript没问题！

全部包含在链接https://jsfiddle.net/24n2on57/7/

中

  

HTML：

<ul id="sortable">
    <li id="L01"><input type="text" id="I01"></li>
    <li id="L02"><input type="text" id="I02"></li>
    <li id="L03"><input type="text" id="I03"></li>
    <li id="L04"><input type="text" id="I04"></li>
</ul>

  

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>
    var standing = [{
            "code": "A",
            "background": "#AEF3D4"
        },
        {
            "code": "B",
            "background": "#6DDCEA"
        },
        {
            "code": "C",
            "background": "#9CC7CC"
        },
        {
            "code": "D",
            "background": "#B37F77"
        }
    ];
</script>

<script>
    var members = [{
            "Class": "A",
            "Name": "Bob"
        },
        {
            "Class": "C",
            "Name": "James"
        },
        {
            "Class": "D",
            "Name": "Thomas"
        },
        {
            "Class": "B",
            "Name": "Anthony"
        }
    ]
</script>

<script>
    // Lookup background color

    function getBackground(name) {
        var i = null;
        for (i = 0; members.length > i; i++) {
            if (members[i].Name === name) {
                return standing[i].background;
                $(this).css('background-color', standing[i].background);
            }
        }

        return;
    };

    $("#I01").on("blur", function() {
        $("#L01").val(getBackground($(this).val()));
    })
    $("#I02").on("blur", function() {
        $("#L02").val(getBackground($(this).val()));
    })
    $("#I03").on("blur", function() {
        $("#L03").val(getBackground($(this).val()));
    })
    $("#I04").on("blur", function() {
        $("#L04").val(getBackground($(this).val()));
    })
</script>

Answer 1

您必须设置css而不是val。此外，您的jsfiddle中有多个不必要的style标记。我删除了它们并在这里添加了工作代码。

对于第一个列表元素，我使用javascript添加样式，而对于其他我使用jQuery按顺序向您展示如何以两种方式执行它。

＆＃13;

＆＃13;

var standing = [{
      "code": "A",
      "background": "#AEF3D4"
    },
    {
      "code": "B",
      "background": "#6DDCEA"
    },
    {
      "code": "C",
      "background": "#9CC7CC"
    },
    {
      "code": "D",
      "background": "#B37F77"
    }
  ];
  var members = [{
        "Class": "A",
        "Name": "Bob"
      },
      {
        "Class": "C",
        "Name": "James"
      },
      {
        "Class": "D",
        "Name": "Thomas"
      },
      {
        "Class": "B",
        "Name": "Anthony"
      }
    ] 
    $(this).css('background-color', 'red');

  function getBackground(name) {
    var i = null;
    for (i = 0; members.length > i; i++) {
      if (members[i].Name === name) {
        return standing[i].background;
        //$(this).css('background-color', standing[i].background); // Don't put any code after 'return' statement
      }
    }
    return;
  }

$("#I01").on("blur", function() {
  document.getElementById("L01").style.backgroundColor = getBackground($(this).val());
});
$("#I02").on("blur", function() {
  $("#L02").css({"background-color":getBackground($(this).val())});
});
$("#I03").on("blur", function() {
  $("#L03").css({"background-color":getBackground($(this).val())});
});
$("#I04").on("blur", function() {
    $("#L04").css({"background-color":getBackground($(this).val())});
 });

＆＃13;

 #myDiv,
 #intro {
   display: table;
   width: 30rem;
   margin: 2rem auto
 }

 li {
   background: lightgreen;
   margin: 1rem;
   height: 3rem;
   line-height: 3rem;
   list-style-type: none;
 }

 input {
   background: #fff;
   height: 2rem;
   line-height: 2rem;
   font-size: 1.5rem;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

      <div class="grid-container" style="margin-top:4rem">

        <div id="intro">
          The color of the list items (default background = "lightgreen") is to be based on the lookup members.Name and return of the standing.background. Valid names are "Bob", "James", "Thomas", and "Anthony". User types in a name, presses tab (onblur) and the
          list item background changes to standing.background.

        </div>

        <div id="myDiv" class="grid-item">

          <ul id="sortable">
            <li id="L01"><input type="text" id="I01"></li>
            <li id="L02"><input type="text" id="I02"></li>
            <li id="L03"><input type="text" id="I03"></li>
            <li id="L04"><input type="text" id="I04"></li>
          </ul> </div>

        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是您的问题的解决方案。

＆＃13;

＆＃13;

var standing = [{
      "code": "A",
      "background": "#AEF3D4"
    },
    {
      "code": "B",
      "background": "#6DDCEA"
    },
    {
      "code": "C",
      "background": "#9CC7CC"
    },
    {
      "code": "D",
      "background": "#B37F77"
    }
  ];
  var members = [{
        "Class": "A",
        "Name": "Bob"
      },
      {
        "Class": "C",
        "Name": "James"
      },
      {
        "Class": "D",
        "Name": "Thomas"
      },
      {
        "Class": "B",
        "Name": "Anthony"
      }
    ]

    $(this).css('background-color', 'red'); 
   
  function getBackground(name) {
    var i = null;
    for (i = 0; members.length > i; i++) {
      if (members[i].Name === name) {
        return standing[i].background;
        $(this).css('background-color', standing[i].background);
      }
    }

    return;
  };

$('input').on('input', function() {
    var input = $(this).val();
    $(this).parent().css('background-color', searchMembers(input));
});

function searchMembers(name){
    var className = '';
    for (var i=0; i < members.length; i++) {
        if (members[i].Name === name) {
            return searchStanding(members[i].Class);
        }
    }
    
}

function searchStanding(className){
    for (var i=0; i < standing.length; i++) {
        if (standing[i].code === className) {
            return standing[i].background;
        }
    }
}

＆＃13;

#myDiv,
 #intro {
   display: table;
   width: 30rem;
   margin: 2rem auto
 }

 li {
   background: lightgreen;
   margin: 1rem;
   height: 3rem;
   line-height: 3rem;
   list-style-type: none;
 }

 input {
   background: #fff;
   height: 2rem;
   line-height: 2rem;
   font-size: 1.5rem;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Change BG color of list item based on json lookup</title>

  </head>

  <body>

    <div class="container">

      <div class="grid-container" style="margin-top:4rem">

        <div id="intro">
          The color of the list items (default background = "lightgreen") is to be based on the lookup members.Name and return of the standing.background. Valid names are "Bob", "James", "Thomas", and "Anthony". User types in a name, presses tab (onblur) and the
          list item background changes to standing.background.

        </div>

        <div id="myDiv" class="grid-item">

          <ul id="sortable">
            <li id="L01"><input type="text" id="I01"></li>
            <li id="L02"><input type="text" id="I02"></li>
            <li id="L03"><input type="text" id="I03"></li>
            <li id="L04"><input type="text" id="I04"></li>
          </ul </div>

        </div>

  </body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我刚刚更改了JQuery部分。您需要的只是根据名称改变背景颜色。

var standing = [{
  "code": "A",
  "background": "#AEF3D4"
},
{
  "code": "B",
  "background": "#6DDCEA"
},
{
  "code": "C",
  "background": "#9CC7CC"
},
{
  "code": "D",
  "background": "#B37F77"
}
 ]; 

 var members = [{
    "Class": "A",
    "Name": "Bob"
  },
  {
    "Class": "C",
    "Name": "James"
  },
  {
    "Class": "D",
    "Name": "Thomas"
  },
  {
    "Class": "B",
    "Name": "Anthony"
  }
] 


function getBackground(name,selector) {

var i = null;
for (i = 0; members.length > i; i++) {
  if (members[i].Name == name) {
    for (k = 0; standing.length > k; k++) {
        if (members[i].Class == standing[k].code) {
       $(selector).parent().css('background-color', standing[k].background);
      }
    }

  }
}

return;
};

$("#I01").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I02").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I03").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I04").on("blur", function() {
    getBackground($(this).val(),this);
 })

同时检查小提琴https://jsfiddle.net/24n2on57/39/