Question

所以有4个输入（仅限示例，实际上更多并且是从mysql生成的），如果我使用keyup函数填充值，则自动显示值。我对jQuery很新，需要找到显示相应名称的方法以及存储在表单隐藏输入中的项目的价格。（pack01-name和pack01-price等等}

<div class="content" id="packcontent_01" style="display: none;"></div>
<div class="content" id="packcontent_02" style="display: none;"></div>
<div class="content" id="packcontent_03" style="display: none;"></div>
<div class="content" id="packcontent_04" style="display: none;"></div>

<p>Pack 1</p>
<input type="text" class="pack" name="pack01"  id="pack01" autocomplete="off" maxlength="2" value="" />
<input type="hidden" class="pack" id="pack01-name" name="pack01-name" value="Name of Pack 1" />
<input type="hidden" class="pack" id="pack01-price" name="pack01-price" value="5.00" />
<p>Pack 2</p>
<input type="text" class="pack" name="pack02" value="" id="pack02" autocomplete="off" maxlength="2"  />
<input type="hidden" class="pack" id="pack02-name" name="pack02-name" value="Name of Pack 2" />
<input type="hidden" class="pack" id="pack02-price" name="pack02-price" value="6.00" />
<p>Pack 3</p>
<input type="text" class="pack" name="pack03" value="" id="pack03" autocomplete="off" maxlength="2"  />
<input type="hidden" class="pack" id="pack03-name" name="pack03-name" value="Name of Pack 3" />
<input type="hidden" class="pack" id="pack03-price" name="pack03-price" value="7.00" />
<p>Pack 4</p>
<input type="text" class="pack" name="pack04" value="" id="pack04" autocomplete="off" maxlength="2"  />
<input type="hidden" class="pack" id="pack04-name" name="pack04-name" value="Name of Pack 4" />
<input type="hidden" class="pack" id="pack04-price" name="pack04-price" value="8.00" />

<script>
$(".pack").keyup(function() {
var curId = this.id.split("k")[1];
$("#packcontent_"+curId).html($(this).val());
$("#packcontent_"+curId).show();
});
</script>

工作示例： http://jsfiddle.net/nitadesign/pvw017uw/

非常感谢你的帮助！

Answer 1

只需用

更改您的JQuery即可

$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];     
    $("#packcontent_" + curId).html($("#pack"+curId+"-name").val()+" -- "+$("#pack"+curId+"-price").val());
    $("#packcontent_" + curId).show();
});

Answer 2

不知道您想要什么样的显示，只需更新此代码即可。

   $(".pack").keyup(function () {
        var curId = this.id.split("k")[1];
        var packName = $('#pack' + curId + '-name').val();
        var packPrice = $('#pack' + curId + '-price').val();
        $("#packcontent_" + curId).html($(this).val() + ', Name :  ' + packName + ', Price : ' + packPrice);
        $("#packcontent_" + curId).show();
    });

更新：

 $(".pack").keyup(function () {
        var curId = this.id.split("k")[1];
        var packName = $('#pack' + curId + '-name').val();
        var packPrice = $('#pack' + curId + '-price').val();

        if ($(this).val() == '') {
             $("#packcontent_" + curId).hide();
        }
        else {
            $("#packcontent_" + curId).html($(this).val() + ', Name :  ' + packName + ', Price : ' + packPrice);
            $("#packcontent_" + curId).show();
        }
    });

Answer 3

$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packName = $('#pack' + curId + '-name').val();
    var packPrice = $('#pack' + curId + '-price').val();

    if ($(this).val() == '') {
         $("#packcontent_" + curId).hide();
    }
    else {
        $("#packcontent_" + curId).html($(this).val() + ', Name :  ' + packName + ', Price : ' + packPrice);
        $("#packcontent_" + curId).show();
    }
});

JQuery - 在keyup上显示多个文本输入值和相应的隐藏输入值

3 个答案: