关联号字段与隐藏的div

我有一组数字输入字段，标记为小号& medium ..，以及一组具有小号和中号标签的div。在我的实际项目中，会有更多的尺寸，而不仅仅是中小尺寸。当您向小数字输入字段中添加数字时，文本输入会在标记为小的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/

的隐藏和显示是正确的，但他们都没有关联到正确的尺寸和产品。所有类=“名数场容器”显示

我想这：

$('.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(); 
    } 
});

来源

2014-01-07 anmaree

这是你的意思吗？

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(); 
    } 
});

来源

2014-01-07 19:24:31

这是正确的，但它仍然显示其他产品中的小标签。该号码字段现在与尺寸标签相关联，但现在与产品无关 – anmaree

好吧现在有更好的答案。不需要编辑html。 –

，很棒！谢谢 – anmaree

基本上你有相关于一个特定name-number-field-container的每个product-quantity定制namedata-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(); 
    } 
});

来源

2014-01-07 19:24:24 ElliotM

现在这个号码已经和尺码标签相关联了，但现在没有和产品关联 – anmaree

@anmaree好的，我已经更新了代码，我不得不添加另一个自定义属性来做你想要的。 – ElliotM

它在你的小提琴中很好用，但是当我尝试在我的项目中实现它时，它似乎不起作用 – anmaree

我只是增加了一个类你的提琴，明确设置这样的。名称字段输入类的宽度。 name-field {width：50px;}并获得了您正在查找的结果。

来源

2014-01-07 19:46:19 whoopah

关联号字段与隐藏的div

回答

相关问题