jquery根据输入值按名称查找元素并将其id分配给另一个元素

Question

我有大约 9 个类似于颜色组（红色、蓝色、绿色等）的无序列表。每个颜色组包含 x 个列表项（浅蓝色、深蓝色等）。当用户单击某个列表项时，它会将列表项的 id（包含某种背景颜色）分配给预览框并显示选择的背景颜色。它还将单击列表项的文本字符串传递给输入字段 .numbercheck。我需要这个文本字符串进行进一步处理。

HTML 标记示例：

<input type="text" class="numbercheck">
<div class="previewbox" id="nocolor"></div>

<div class="color-panels">
  <ul id="blue-panel" class="colorpanel">
    <li id="ral-1000-lightblue" name="1000">RAL 1000</li>
    <li id="ral-1001-darkblue" name="1001">RAL 1001</li>
  </ul>

  <ul id="red-panel" class="colorpanel">
    <li id="ral-2000-red" name="2000">RAL 2000</li>
    <li id="ral-2001-darkred" name="2001">RAL 2001</li>
  </ul>
</div>

我上面描述的工作，文本字符串被传递到输入字段，并在预览框中显示正确的颜色。但我也希望用户能够输入某个数字（即 2000），然后查找具有相同名称的列表项（这将是 <li id="ral-2000-red" name="2000">RAL 2000</li>）。如果 <li> 名称与输入值匹配，则列表项的 id 应像 <div class="previewbox" id="ral-2000-red"></div> 一样传递给预览框。如果名称与输入值不匹配，则 id 应保持id="nocolor"。

请注意，我已经有一个从输入值中提取数字的工作函数，因此当输入“ral 1000”或“abc 1000”等时，它将从字符串中提取 1000。

我已经在互联网上搜索了几个小时，但目前我不知道要使用哪种代码来完成此操作。我已经尝试过类似的东西：

var colorname = $('.colorpanel li').attr('id');
var inputval = $('input.numbercheck').val();
if (colorname == inputval){
    $('.previewbox').attr('id',colorname);
}

或者：

var inputval = $('input.numbercheck').val();
var listitem = $('.colorpanel li[name='inputval']').attr('id');

最后一个示例对我不起作用，它给了我一个错误，提示 var listitem 所在的行缺少“)”。

任何帮助将不胜感激。

Answer 1

尝试替换

$('.colorpanel li[name='inputval']').attr('id');

与

$('.colorpanel li[name='+ inputval+ ']').attr('id');

Answer 2

由于inputval 是一个变量，您需要正确创建选择器文本。

var inputval = $('input.numbercheck').val();
var listitem = $('.colorpanel li[name='+ inputval + ']').attr('id');