동적으로 생성 된 클래스를 사용하여 hide 요소를 표시하려고합니다.

Question

하위 클래스의 클래스와 관련하여 부모 요소를 표시하거나 숨기려고합니다. 내가 원한다.

<p><a href="<?php echo site_url('mp3/coins.mp3');?>" title="hello" class="sm2_button" id="song1">play</a> Dear Yesterdays </p> 
    <p><a href="<?php echo site_url('mp3/fancy-beer-bottle-pop.mp3');?>" title="hello" class="sm2_button" id="song2">play</a> song 2</p> 
    <p><a href="<?php echo site_url('mp3/coins.mp3');?>" title="hello" class="sm2_button" id="song1">play</a> Dear Yesterdays </p> 
    <p><a href="<?php echo site_url('mp3/fancy-beer-bottle-pop.mp3');?>" title="hello" class="sm2_button" id="song2">play</a> song 2</p> 

     <script> 
    $(document).ready(function(){ 
    $('.play p').hide(); 
     $('.play p:first').show(); 
    $('.play p a').each(function(){ 
    var attr = $(this).attr('class'); 
    var cls = attr.split(' '); 
    if(cls[1]=='sm2_playing' || cls[1]=='sm2_paused') 
    { 
     // display none to all .play p tags except the one with those classes sm2_playing or sm2_paused 
     } 
    }); 



    }); 
    </script> 

도와주세요. soundmanager2를 사용하고 있습니다. 그리고 나는 연주하는 것들만 표시하면서 노래를 하나씩 연주하고 싶습니다.

Answer 1

jQuery는 향후 개체에 대해 수행하려고 시도하지 않습니다.

오히려 show()/hide() 사용하는 것보다, 당신은 단지 당신의 CSS와 함께 addClass() 및 removeClass()을 사용할 수 있습니다 : 당신이 $(this).addClass('sm2_playing')을 수행 할 때 그래서 다음 요소가 표시됩니다

CSS

.play p 
{ 
    display: none; 
} 

.play p.sm2_playing, .play p.sm2_paused 
{ 
    display: block; 
} 

, $(this).removeClass('sm2_playing sm2_paused') 요소가 숨겨집니다.

Answer 2

동적으로 생성되는 클래스 나 개체를 사용하는 경우 해당 개체를 직접 사용할 수 없습니다. 이러한 클래스와 객체의 경우 이벤트를 바인딩해야합니다. JQuery bind here을 참조하십시오.