동적 HTML 속성 업데이트

Question

무엇을하려고하는 것은 p가 div.test가 링크 rel을 올바르게 인쇄한다는 "활성"클래스를 상속하는 경우입니다.

현재 p 태그에 할당 된 클래스없이 페이지가로드되면 그렇지 않습니다. p 태그가 "active"클래스를 상속 받았을 때 어떻게 만들 수 있습니까? div.test에 인쇄 된 링크가 rel을 올바르게 인쇄 할 수 있습니까?

$(document).ready(function(){ 
    var relvar = $('p.active').attr('rel'); 
    $("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

    $("p").click(function() { 
    $(this).toggleClass("active"); 
    }); 

    }); 

Answer 1

나는 당신이 무엇을 요구하는지 잘 모르겠습니다. <p> 요소 클래스를 변경할 때마다

var relvar = $('p.active').attr('rel'); 
$("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

이 실행하려면 : 당신은 당신이 코드를 원하는 건가요? 그렇다면,이 같은 더 "onchangeclass"이벤트 또는 아무것도 없지만, 실제로이 처리하는 자신 만의 이벤트를 만들 수 있습니다

$('p').bind('toggleActive', function() { 
    if($(this).hasClass('active')) { 
     var relvar = $(this).attr('rel'); 
     $("div.test").html("<a rel='"+ relvar +"'>hello</a>");   
    } 
}).click(function() { 
    $(this).toggleClass('active').trigger('toggleActive'); 
}); 

Check this code in action.

실제로 이것은 일종의 로터리입니다. 클릭 핸들러 자체에서 로직을 수행하는 것이 가장 간단합니다. 자체 이벤트로 이동하는 주된 이점은 코드의 다른 위치에서이 작업을 수행해야하는 경우 해당 논리를 별도로 유지하고 필요할 때 "트리거"할 수 있다는 것입니다.

Answer 2

이것이 실제로 진행되고 있는지 확실하지 않지만 click 코드에서 처리 할 수 ​​없습니까?

$(document).ready(function() { 
    $('p').click(function() { 
    $(this).toggleClass('active'); 

    if ($(this).hasClass('active')) { 
     relvar = $(this).attr('rel'); 

     $('div.test').html("<a rel='" + relvar + "'>hello</a>"); 
    } else { 
     $('div.test').html("<a>hello</a>"); 
    } 
    }); 
}); 

는 지금까지 내가 아는 한, 당신은 그것을 확인하고 사업부를 업데이트 할 필요가 있는지 확인하기 위해 일부 이벤트에 바인딩해야합니다.