Question

我正在写一个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> &nbsp;&nbsp;

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

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

<span class="filteroptions" id='cod' style="border-bottom: 2px solid #0461AA;color: #5E5E5E;cursor: pointer;">COD</span> &nbsp;&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');
        }
    }


});

我面临的问题是，如果＆＃39;免费送货＆＃39; 在第一次点击时被点击，第二次点击我会点击＆＃39;鳕鱼＆＃39; 它不显示只有鳕鱼，第三次点击我点击任何过滤器选项然后所有列表结果都隐藏

Answer 1

您需要在$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，例如，< / p>

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

Live Demo

或者，我认为使用data-atrrribute时此代码会变短，例如，如果您添加要滑动的所有类，然后添加span element data- 1}}喜欢，

<span data-classes=".pricevariant,.freeShipping,.non-variant"
     class="filteroptions" id='shippingfree' >Free Shipping</span> &nbsp;&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
    });
});

希望以上内容对你有用。

Jquery Hide＆amp;根据班级名称显示

示例HTML输出

1 个答案: