JavaScript JQuery addClass() не работает

Question

Я пытаюсь использовать addClass и removeClass в следующем скрипте:

function showDiv(e, f) { 
    for (i = 0; i < e; i++) { 
    $('div.div' + i).addClass('hide').removeClass('show'); 
    $('li.li' + i).addClass('hide').removeClass('show'); 
    } 
    $('div.div' + f).addClass('show').removeClass('hide'); 
} 

function showLi(e) { 
    for (i = 0; i < e; i++) { 
    $('div.div' + i).addClass('hide').removeClass('show'); 
    $('li.li' + i).addClass('show').removeClass('hide'); 
    } 
} 

<ul> 
    <?php for($i=0;$i<10;$i++) { ?> 
    <li class="specialistTab li<?php echo $i?>" onclick="showDiv(10,<?php echo $i;?>)" style="background-image:url('images/specialists/<?php echo $rowC[0][2];?>')"></li> 
    <div class="sDescription div<?php echo $i?>"> 
    <div class="sImage" style="background-image:url('images/specialists/<?php echo $rowC[0][2];?>')"></div> 
    <div class="sName"> 
     <?php echo $rowC[0][1];?> 
    </div> 
    <div class="closeX" onclick="showLi(<?php echo $i?>)">X</div> 
    <div class="sDesc"> 
     <?php echo $rowC[0][3];?> 
    </div> 
    </div> 
    <?php } ?> 
</ul> 

Код должен скрыть DIV при щелчке по списку и скрыть его когда мы закрываем на X.

Сценарий не работает.

Answer 1

Я полагаю, вы используете Jquery для этого, вам нужно добавить свой php-цикл.

//JS script 
$(function() { 

    $('.tabs li').on('click', function(e) { 
     $(e.target).children('.sDescription').show(); 
    }); 

    $('.tabs li .close').on('click', function(e) { 
     var $parent = $(e.target).parent(); 
     $parent.hide(); 
    }); 
}); 

//HTML 
<ul class="tabs"> 
    <li> 
     <div class="sDescription"> 
      <div class="sImage"></div> 
      <div class="sName">1</div> 
      <div class="close">X</div> 
      <div class="sDesc">desc1</div> 
     </div> 
    </li> 
    <li> 
     <div class="sDescription"> 
      <div class="sImage"></div> 
      <div class="sName">2</div> 
      <div class="close">X</div> 
      <div class="sDesc">desc1</div> 
     </div> 
    </li> 
</ul> 

Взгляните на эту jsbin

Answer 2

You код может быть значительно упрощена, и ваш PHP исправлено, так что вы в конечном итоге с действительным HTML:

$(function() { 
    $('.closeX').on('click', function() { 
     $('.sDescription').addClass('hide').removeClass('show'); 
    }); 
    $('li.specialistTab').on('click', function() { 
     $(this).find('.sDescription').addClass('show').removeClass('hide'); 
    }); 
}); 

Или просто:

$(function() { 
    $('.closeX').on('click', function() { 
     $('.sDescription').hide(); 
    }); 
    $('li.specialistTab').on('click', function() { 
     $(this).find('.sDescription').show(); 
    }); 
}); 

PHP:

<ul> 
    <?php for($i=0;$i<10;$i++) { ?> 
    <li class="specialistTab" style="background-image:url('images/specialists/<?php echo $rowC[0][2];?>')"> 
    <div class="sDescription"> 
     <div class="sImage" style="background-image:url('images/specialists/<?php echo $rowC[0][2];?>')"></div> 
     <div class="sName"> 
      <?php echo $rowC[0][1];?> 
     </div> 
     <div class="closeX">X</div> 
     <div class="sDesc"> 
      <?php echo $rowC[0][3];?> 
     </div> 
    </div> 
    </li> 
    <?php } ?> 
</ul>