Question

我有一组数字输入字段，标记为小＆amp; medium ..，以及一组标签为small and medium的div。在我的实际项目中，将有更多的尺寸，而不仅仅是中小型。当您向小数字输入字段添加数字时，文本输入插入后标记为小的div。从小数字输入字段中减去数字时，将删除最近添加的文本输入字段。

如果小数字字段为0，我想要

<div class="name-number-field-container" data-size="Small">

要隐藏，如果小数字字段大于0我想要

<div class="name-number-field-container" data-size="Small">

显示。中等也是如此。

http://jsfiddle.net/7PhJZ/63/

隐藏和显示是正确的，但它们与正确的大小和产品无关。 all class =＆＃34; name-number-field-container＆＃34;显示

我试过这个：

$('.product-quantity').on('change', function(){
    var select = $(".name-number-field-container").closest('[id^="product"]').find('[data-size="' + this.name + '"]')
    if($(this).val()>=1){
        $(select).show();
    } else {
        $(select).hide();
    }
});

Answer 1

这是你的意思吗？

http://jsfiddle.net/9kXLC/4/

用以下代码替换您的显示/隐藏代码：

$('.product-quantity').on('change', function () {
    var select = ".name-number-field-container[data-size=" + $(this).attr('name') + ']'
    if ($(this).val() >= 1) {
        $(this).parents('div[id^=product-]').find(select).show();
    } else {
        $(this).parents('div[id^=product-]').find(select).hide();
    }
});

Answer 2

http://jsfiddle.net/fenderistic/Q4bFB/

基本上，每个name都有一个与特定product-quantity name-number-field-container相关的自定义data-size。我必须添加data-output-id属性来区分不同的div。因此，您可以使用该信息隐藏或显示相关的div。

$('.product-quantity').on('change', function () {
    if ($(this).val() >= 1) {
        $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").show();
    } else {
        $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").hide();
    }
});

Answer 3

我刚刚为你的小提琴添加了一个类，它明确地设置了.name-field输入类的宽度，如下所示：.name-field {width：50px;}并获得了你想要的结果。

关联数字字段与隐藏的div

3 个答案: