Блог

Я создаю jquery, чтобы скрыть и показать <li> , что в соответствии с именем класса существует. В <li> теге я создаю имя класса на основе результатов php. вот мой код

 <?php 
foreach($xxx as $yyy) 
{
    if($yyy['cod'] == 1){ $codClass = 'codEnabled'; } 
    if($yyy['emi'] == 1){ $emiClass = 'emiEnabled'; } 
    if($yyy['stock'] == 1){ $stockClass = 'in_stock'; } 
    if($yyy['shipping'] == 1){ $shipClass = 'freeShipping'; }     
    ?>
    <li class="minclass <?php echo $codClass.' '.$emiClass.' '.$stockClass.' '.$shipClass; ?>">
    {my data}
    </li>
<?php } ?>

<span class="filteroptions" id="shippingfree" style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">Free Shipping</span> amp;nbsp;amp;nbsp;

<span class="filteroptions" id="stock"style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">In Stock</span> amp;nbsp;amp;nbsp;

<span class="filteroptions" id="emi" style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">EMI</span> amp;nbsp;amp;nbsp;

<span class="filteroptions" id='cod' style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">COD</span> amp;nbsp;amp;nbsp;

<span class="filteroptions" id="reset" style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">Reset All
  

ПРИМЕР ВЫВОДА HTML

 Filters : Freeshipping  | In Stock | COD | EMI | Reset All


    <li class="mainclass pricevariant codEnabled emiEnabled in_stock freeShipping"> {mydata} </li>
<li class="mainclass pricevariant codEnabled emiEnabled in_stock freeShipping non-variant"> {mydata} </li>
    <li class="mainclass pricevariant in_stock freeShipping"> {mydata} </li>
    <li class="mainclass pricevariant in_stock freeShipping non-variant"> {mydata} </li>
    <li class="mainclass pricevariant codEnabled in_stock freeShipping non-variant"> {mydata} </li>
    <li class="mainclass pricevariant codEnabled freeShipping"> {mydata} </li>
    <li class="mainclass pricevariant codEnabled in_stock"> {mydata} </li>
    <li class="mainclass pricevariant codEnabled emiEnabled in_stock freeShipping"> {mydata} </li>
    <li class="mainclass pricevariant freeShipping"> {mydata} </li>
    <li class="mainclass pricevariant in_stock emiEnabled freeShipping"> {mydata} </li>
  

Вот мой скрипт Jquery

 $('.filteroptions').click(function(){

    var myid = (event.target.id);
    //
    //var productNamee = '<?php echo $proname; ?>';
    //
    if (myid !='')
    {
        if (myid=='cod') {
            $('.pricevariant').slideToggle('slow');

            $('.non-variant').slideToggle('slow');
        }
        if (myid =='shippingfree') {
            $('.pricevariant').slideToggle('slow');
            $('.freeShipping').slideToggle('slow');
            $('.non-variant').slideToggle('slow');
        }
        if (myid =='stock') {

            $('.freeShipping').hide('slow');
            $('.codEnabled').hide('slow');
            $('.non-variant').slideToggle('slow');
            $('.in_stock').slideToggle('slow');
            $('.pricevariant').slideToggle('slow');
        }
    }


});
  

В чем проблема, с которой я сталкиваюсь здесь, заключается в том, что если при первом нажатии нажимается «бесплатная доставка», при втором нажатии я нажимаю на «cod», он не показывает только cod, при третьем нажатии я нажимаю на любую опцию фильтра, тогда все результаты списка будут скрыты

Вам нужно сделать другие классы пустыми в вашем $xxx цикле, например,

 <?php
  foreach($xxx as $yyy)  {
      // make all classes as blank, if previously added.
      $codClass ='';$emiClass ='';$stockClass ='';$shipClass ='';
      if($yyy['cod'] == 1){ $codClass = 'codEnabled'; } 
      if($yyy['emi'] == 1){ $emiClass = 'emiEnabled'; } 
      if($yyy['stock'] == 1){ $stockClass = 'in_stock'; } 
      if($yyy['shipping'] == 1){ $shipClass = 'freeShipping'; } 
      .... 
  

Еще одна вещь, которую вы увидите в своем console , тогда вы обнаружите ошибку «событие не определено», поэтому, чтобы удалить это, добавьте параметр event в свой обратный вызов click, например,

 $('.filteroptions').click(function(event){
        // -----add event here ----^
     var myid = (event.target.id);
              // --^-- here you are using event, which is undefined
  

Живая демонстрация

В качестве альтернативы, я думаю, что этот код может быть коротким, используя data-atrrribute , например, если вы добавляете все классы, которые хотите сдвинуть, а затем добавляете в свой span element с data- помощью like,

 <span data-classes=".pricevariant,.freeShipping,.non-variant"
     class="filteroptions" id='shippingfree' >Free Shipping</span> amp;nbsp;amp;nbsp;
....
  

И в скрипте попробуйте это как,

 $(function(){
    $('.filteroptions').click(function(){
        $('.mainclass').hide();// hide all li first(let mainclass is common in li's)
        $($(this).data('classes')).slideToggle();// now toggle only selected classes
    });
});
  

Надеюсь, что вышесказанное сработает для вас.