根据 JSON 查找更改列表项的背景

我们的俱乐部需要在输入字段中键入成员，并根据支持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>

您必须设置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>

这是您问题的解决方案。

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

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

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

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/

相关内容

最新更新

热门标签：