jQuery로 ID 전환하기

제품 목록 템플릿에 대해 ID를 전환하려고합니다 (클래스가 더 좋을 수도 있지만이 경우 ID를 사용해야 함). 불행히도 첫 번째 클릭에서만 작동합니다. 한 번 다시 전환 할 수 없습니다. 내가 도대체 뭘 잘못하고있는 겁니까? 여기 jQuery로 ID 전환하기

은 내가

$(document).ready(function(){ 

    $("a.toggle").bind("click", function(e){ 
     e.preventDefault(); 

     var theid = $(this).attr("id"); 
     var thecontainer = $("div#container"); 

    if($(this).hasClass("active")) { 
     return false; 
    } else { 

     if(theid == "gridView") { 
      $(this).addClass("active"); 
      $("#listView").removeClass("active"); 

     thecontainer.removeAttr('id'); 
     thecontainer.attr('id', 'container'); 
     } 
     else if(theid == "listView") { 
      $(this).addClass("active"); 
      $("#gridView").removeClass("active"); 

      thecontainer.removeAttr('id'); 
      thecontainer.attr('id', 'containerList'); 

      } 
     } 

    }); 
});

을 사용하고있는 코드입니다 그리고 여기에 내가보기를 전환하려면 사용하고있는 링크에 대한 HTML이다.

<div class="buttonPanel"> 
    <a id="gridView" class="btnGridView toggle active" href="#">Grid</a> 
    <a id="listView" class="btnListView toggle" href="#">List</a> 
    </div>

CSS는 꽤 길지만 요약하면 상자와 기능이있는 그리드보기와 스트레이트 목록보기의 두 가지 버전이 있습니다.

출처

2012-10-05 Michael Coleman

으로 var thecontainer = $("div#container");

를 교체합니다. '.prop()'를 사용하여 DOM 객체의 실제 ID 값을 변경해야합니다. –

변경된 ID를 listview 또는 gridview로 다시 전환 할 수있는 코드는 없습니다. 컨테이너와 컨테이너 목록은 else 문에서 if 문을 트리거하지 않으므로 한 번만 작동해야합니다. – Rooster

.prop()를 사용하지 않았습니다. 어떻게 생겼습니까? –

이 줄을 문서에 추가하십시오 .ready : $("div#container").addClass("containerClass"); 클릭 이벤트 내에 있지 않습니다.

그런 다음 많은 마크 업을 변경 이상으로 늘 할 ID 속성을 제거 var thecontainer = $(".containerClass");

출처

2012-10-05 21:52:03

jQuery로 ID 전환하기

답변

관련 문제