根据文本框值显示 div

Question

我有一个输入字段，可以从 db 中获取它的值，可以说值是 M、K、H、J、V 或 G，具体取决于它需要用 aaa、bbb、ccc、ddd 打开 div 的值， eee 或 fff 作为文本。

页面上显示的代码如下，我省略了该部分正在工作的数据库中的检索部分（输入框显示 M、K、H、J、V 或 G，具体取决于 id。）

echo "<input type='text' name='periode' id='periode' data-related-item='" .$row['periode']. "' value='" .$row['periode']. "'>";
echo "<div class='hidden'><div id='M'>aaa</div></div>";
echo "<div class='hidden'><div id='K'>bbb</div></div>";
echo "<div class='hidden'><div id='H'>ccc</div></div>";
echo "<div class='hidden'><div id='J'>ddd</div></div>";
echo "<div class='hidden'><div id='V'>eee</div></div>";
echo "<div class='hidden'><div id='G'>fff</div></div>";

当我在开发人员模式下检查源代码时，它显示数据相关项部分已从数据库中正确检索：

<input type="text" name="periode" id="periode" data-related-item="M" value="M">

我想使用以下 JS，但我需要更改它以使用文本框。

<script type="text/javascript">
function evaluate1(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();

if(item.is(":checked")){
    relatedItem.fadeIn();
}else{
    relatedItem.fadeOut();   
}
}

$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
</script> 

最简单的方法是改变路线：

$('input[type="checkbox"]').click(evaluate1).each(evaluate1);

进入

$('input[type="textbox"]').click(evaluate1).each(evaluate1);

但是我需要做什么：

if(item.is(":checked")){

提前感谢您的帮助。

我尝试了以下方法，但它不起作用。

if(item.is("M||K||H||J||V||G")){

罗伯特·罗萨斯的解决方案

解决方案在jsfiddle中

http://jsfiddle.net/dXTtz/7/

Answer 1

我根据您提供的代码制作了这段代码：

$(document).ready(function(){

$("#periode").keyup(function(){
 var valor = $("#periode").val();
    $(".hidden").each(function(){
     var hijo = $(this).children().attr('id');   
     if(hijo == valor)
     {
      $(this).removeClass("hidden");
     }
    });
});

});

在这里工作：http://jsfiddle.net/robertrozas/dXTtz/2/

这种方式适用于页面加载：http://jsfiddle.net/robertrozas/dXTtz/4/

页面加载和移除多余的隐藏 div：http://jsfiddle.net/dXTtz/5/