select input이 value와 같으면 변경하고, 변경하면 해당 변경 사항을 제거하십시오.

"requestHistoryRequestType"이라는 선택 상자가 있습니다. 그 선택 상자의 값을 변경할 때 클래스 및 특성을 필드에 추가하고 내가 매개 변수로 전달하는 필드에 범위를 추가 할 수 있도록 일부 jQuery 쓰려고합니다.select input이 value와 같으면 변경하고, 변경하면 해당 변경 사항을 제거하십시오.

사용자가 EXPAPP 또는 EXPDEN을 선택한 후 해당 항목을 NA로 변경하면 이전 필드에서 추가 된 항목을 제거하고 다른 필드에 동일한 내용을 추가해야합니다. 설명하기가 어렵지만 질문을 멀리하십시오! 나는 이런 식으로 복잡한 jQuery를 작성하는 것에 다소 익숙하다.

, 가산 클래스 등을 수행하는 기능 : 변경 청취자에

function requiredField(requiredField) { 
    $(requiredField).parent().addClass('has-error'); 
    $(requiredField).attr('data-rule-required', true); 
    $("label[for='" + requiredField.replace('#', '') + "']").append("<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>"); 
}

실제 :

//Validations for EXPAPP, EXPDEN, and NA 
$("#requestHistoryRequestType").on("change", function() { 
    if ($("#requestHistoryRequestType").val() === "EXPAPP" || $("#requestHistoryRequestType").val() === "EXPDEN"){ 
     requiredField("#requestHistoryVerbalDateTime"); 
     requiredField("#requestHistoryWrittenDateTime"); 
    } else if ($("#requestHistoryRequestType").val() === "NA") { 
     requiredField("#requestHistoryComments"); 
    } 
});

덕분에 스택!

출처

2013-12-12 Devan

_ "복잡한 jQuery 작성"_이 것이 주된 문제이며 _complex_가되어서는 안됩니다. – undefined

이것은 재사용 가능한 것을 작성하려고 노력하고 있다는 점에서 복잡합니다. 따라서 함수입니다. – Devan

재사용 할 수있는 함수를 사용하는 것이 좋습니다. '("# requestHistoryRequestType") 대신에 DOM을 재 쿼리하는 대신 _changed_ 엘리먼트 (event_ _ 타겟)를 참조하는'this' 키워드를 사용할 수 있습니다. val() === "EXPDEN")'if ($ .inArray (this.value, [ 'one', 'two'])> -1)' – undefined

모든 필드에서 추가 된 물건을 제거하고 (requiredField 전에 호출 할 함수를 만듭니다) 호출

function removeRequiredFields() 
{ 
    var $fields = $("#requestHistoryVerbalDateTime, #requestHistoryWrittenDateTime, #requestHistoryComments"); 
    $fields.parent().removeClass('has-error'); 
    $fields.attr('data-rule-required', false); 
    $fields.each(function() { 
    $("label[for='"+$(this).attr('id')+"']").find("[title='Required Field']").remove(); 
    }); 
}

또는 유연성을 높이기 위해 이벤트 처리기에서 $fields을 하드 코딩하지 않고 removeRequiredFields()에 전달할 수 있습니다.

출처

2013-12-12 18:43:43 pvgoran

$ ("# requestHistoryRequestType" 이상한, 정확한 소스를 사용할 때 "Object # 에 메서드 'attr'이 없다는 오류가 발생합니다 ... – Devan

오른쪽, 편집하고"this "를 $()로 감 쌉니다. – pvgoran

좋아요. 반복 할 때와 클래스를 추가 할 때 이와 동일한 유형의 소스를 사용했습니다. 도와 주셔서 감사합니다; 이제 나는 어떻게 반복 하는지를 안다! – Devan

"NA"를 선택했을 때 동일한 기능으로 그 기능을 구현하려고 할 때 별도의 기능을 사용할 수 있습니다.

이벤트 처리기를 다시 작성하여 조금 더 깔끔하게 처리 할 것입니다 (IMO).

//Validations for EXPAPP, EXPDEN, and NA 
$("#requestHistoryRequestType").on("change", function() { 
    var selectedVal = $(this).val(); 
    if (selectedVal === "EXPAPP" || selectedVal === "EXPDEN"){ 
     requiredField("#requestHistoryVerbalDateTime"); 
     requiredField("#requestHistoryWrittenDateTime"); 
    } else if (selectedVal === "NA") { 
     requiredField("#requestHistoryComments"); 
    } 
});

이렇게하면 이벤트가 트리거 될 때마다 조건을 테스트 할 수있는 잠재력이 3 번 발생할 수 있습니다. 사소한 변화이지만 더 복잡하고 큰 jQuery 선택기를 사용하면 유용 할 것입니다.

편집 : 당신이 느끼는 경우에 당신은 당신이 당신이 될 경우 오직 하나의 케이스를 가진

function requiredField(requiredField1, requiredField2) { 
    if (requiredField2 != null){ 
     $(requiredField1,requiredField1).parent().addClass('has-error'); 
     $(requiredField1,requiredField1).attr('data-rule-required', true); 
     var requiredLabel = "<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>" 
     $("label[for='" + requiredField1.replace('#', '') + "']").append(requiredLabel); 
     $("label[for='" + requiredField2.replace('#', '') + "']").append(requiredLabel); 
    } 
    else { 
     //remove multiple element classes and add it to the single one representing the "NA" 
    } 
}

이것은 당신에 근거를 추가하려면 두 요소와 함수를 호출 할 수 있습니다 하나의 함수에서 작업을 수행해야합니다 는 "NA"의 경우에 하나의 "requiredField"을 통과

출처

2013-12-12 18:35:00 Mark

select input이 value와 같으면 변경하고, 변경하면 해당 변경 사항을 제거하십시오.

답변

관련 문제