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

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

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

Answer 2

尝试替换

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

与

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

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

2 个答案: