2010-03-18 3 views
1

div가 있는데 class = "phoneNo"라고합시다. div 안에는 두 개의 링크가 있습니다. 하나는 다른 div를 추가하는 링크이고, 다른 하나는 div 자체를 삭제하는 링크입니다. 나는이 div 중 오직 1 개가있는 경우 "delete"링크를 숨기고이 div가 둘 이상인 경우 "div"링크가 모든 div에 나타나야하는 루프를 만들려고합니다.

지금까지 나는이 함께했다,하지만 더 성공 :새 div가 생성 될 때마다 반복됩니다.

var pCount = $(".phoneNo").length; 
       $(pCount).each(function(){ 
        if (pCount <= 1) { 
         $("a.deleteThis").hide(); 
        } 
        else if (pCount >= 1) { 
         $("a.deleteThis").show(); 
        } 
        return true; 
       }); 

편집 (3.21.10) : 아래 jWhiz의 조언에 따르면

, 내가 무엇을 재 작업. 코드에 오류가 없으며 "삭제"링크의 숨기기/표시를 제외한 모든 것이 작동합니다. 여기

내 코드 (일부 점은 문제가 관련이없는,하지만 내 논리 흐름을 재 도움이 될 수 있습니다)입니다 :

코드의 문제는 다음 pCount에 int를 저장하고있는 점이다
function checkHide() { 
        if ($(".phoneNo").length == 1) 
         $(".deleteThisPhone").hide(); 
        else 
         $(".deleteThisPhone").show(); 
        } 
       //adding and deleting phone numbers in popup 
       $(".addNewPhone").live("click", function(){ 
        clicked = $(this); 
        grandFather = clicked.parent().parent(); 
        cloneCurr = grandFather.clone(true).find("input").each(function(){ 
         $(this).val("")   
        }).end().animate({opacity:"show"}) 
        grandFather.after(cloneCurr) 
        checkHide(); 
        newHeight = $("#fancybox-wrap").height(); 
        $('#fancybox-wrap').css({"height": newHeight + 66 + "px" }); 
         return false 
       }); 
       $(".deleteThisPhone").live("click",function(){ 
        $(this).parent().parent().slideUp(150); 
        newHeight = $("#fancybox-wrap").height(); 
        $('#fancybox-wrap').css({"height": newHeight - 66 + "px" }); 
        checkHide(); 
       }); 

답변

1

그 int의 jQuery 객체를 얻으려고합니다. 나는 그것을 조금 다르게 생각할 것이다. 선택자를 공백으로 연결하여 부모 내에서 범위를 지정할 수 있음을 기억하십시오.

if ($(".phoneNo").length == 1) 
    $(".phoneNo a.deleteThis").hide(); 
else 
    $(".phoneNo a.deleteThis").show(); 

업데이트

생성 위의 논리 매번 실행하거나 PHONENO을 삭제해야합니다.

<div class="phoneNoCollection"> 
    <div class="phoneNo"> 
    <input type="text" name="phoneNo" value="123 456 7890"/> 
    <a class="deleteThis">Delete</a> 
    <a class="add">Add another</a> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
    // initial setup 
    $(".phoneNo .deleteThis").click(removeParent); 
    $(".phoneNo .add").click(appendPhoneNo); 
    checHide(); 
    }); 

    function checkHide() { 
    // logic from above 
    if ($(".phoneNo").length == 1) 
     $(".phoneNo a.deleteThis").hide(); 
    else 
     $(".phoneNo a.deleteThis").show(); 
    } 

    function removeParent(e) { 
    $(e.target.parent).remove(); 
    checkHide(); 
    } 

    function appendPhoneNo() { 
    var el$ = $("<div class='phoneNo'><input type='text' name='phoneNo'/>" + 
     "<a class='deleteThis'>Remove</a><a class='add'>Add another</a></div>")); 
    $el.child(".deleteThis").click(removeParent); 
    $el.child(".add").click(appendPhoneNo); 
    $el.appendTo(".phoneNoCollection"); 
    checkHide(); 
    } 
</script> 
+0

gWiz, 깔끔한 체인이 잘 작동합니다. 문제는 브라우저가 새로운 .phoneNo div가 생성되고 있거나 계산되지 않았 음을 제대로 감지하지 못하기 때문에 결과로 a.deleteThis가 숨겨집니다. :-( –

+0

오, 논리를 작성/삭제하기 위해이 논리를 실행해야합니다. 답변을 업데이트하면 표시됩니다. –

+0

흠 ... 솔루션을 작동 시키려고하지만, 조금 힘든 시간을 보냈습니다. 나는 해결책으로 나아갈 수 있다고 생각합니다. 포인터에 감사드립니다, gWhiz. –

0

$ (pCount) .each는 유효한 선택자가 아니며 길이의 정수입니다.

$(".phoneNo").each(... 
관련 문제