javascript - 根据 json 查找更改列表项的背景

Question

我们的俱乐部需要在输入字段中输入成员，并根据支持的 json 文件中的名称查找更改父李的背景颜色。我更喜欢 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 来向您展示如何以两种方式执行此操作。

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())});
 });

 #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;
 }

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