숫자 필드를 숨겨진 div와 연결

Question

작은 숫자 & 중간 ...이라는 숫자 입력란 집합과 small 및 medium 레이블이있는 div 집합이 있습니다. 내 프로젝트에는 작은 것보다 더 많은 크기가있을 것입니다. 작은 숫자 입력 필드에 숫자를 추가하면 텍스트 입력이 삽입됩니다. div라는 라벨이 붙은 다음 작은. 작은 숫자 입력 필드에서 숫자를 빼면 최근에 추가 된 텍스트 입력 필드가 제거됩니다. 적은 수의 필드가 0이면 적은 수의 필드가 0보다 큰 내가

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

표시 할 경우

, 나는,

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

Answer 1

이게 무슨 뜻인가요?

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

이 당신의 표시/숨기기 코드를 바꿉니다 : 난 그냥 명시 적으로이 같은 .name을 필드 입력 클래스의 너비를 설정하여 바이올린에 클래스를 추가

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

는 기본적으로 특정 name-number-field-container의 상관 관계가 각각 product-quantity에 대한 사용자 정의 name이 모든 클래스 = "이름 - 수 - 현장 용기"가 표시

내가이 시도 data-size. 서로 다른 div를 구별하기 위해 data-output-id 속성을 추가해야했습니다. 따라서 해당 정보를 사용하여 상관 관계를 숨기거나 표시하려면 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 {width : 50px;}를 찾고 찾고 있던 결과를 얻었습니다.