Question

这里的事情是我想转换下面的第二个函数

$portfolio_selectors.on('click', function(){...

加载页面的启动！

此块用于在html页面中显示<li>标记！我希望块在页面加载本身而不是onclick上工作。我尝试了load()，ready()，但还有其他办法吗？

jQuery(function($) {
    //portfolio
    $(window).load(function(){
    $portfolio_selectors = $('.portfolio-filter >li>a');
    if($portfolio_selectors!='undefined'){
        $portfolio = $('.portfolio-items');
        $portfolio.isotope({
            itemSelector : 'li',
            layoutMode : 'fitRows'
        });

        $portfolio_selectors.on('click', function(){
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({ filter: selector });
            return false;
        });
    }
});
}

下面的代码是给定jquery函数的css3代码

.portfolio-items.col-3 > li {
     width: 33%;
     }
.portfolio-item {
    padding: 0;
    margin: 0;
    }
.portfolio-item .item-inner {
     background: #fff;
      border: 1px solid #eee;
      padding: 10px 10px 0;
      margin: 0 20px 20px 0;
      position: relative;
    }
.portfolio-item img {
      width: 100%;
    }


.portfolio-item h5 {
  background: #fff;
  margin: 0;
  padding: 10px 0;
  font-weight: 700;
  font-size: 14px;
  color: #2c3e50;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.portfolio-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  vertical-align: middle;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
}
.portfolio-item .overlay .preview {
  position: relative;
  top: 50%;
  display: inline-block;
  margin-top: -20px;
}
.portfolio-item:hover .overlay {
  opacity: 1;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

html编码如下。

<section id="portfolio" class="container">
        <ul class="portfolio-filter">
            <li><a class="btn btn-default active" href="#" data-filter=".hod">HOD Desk</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".faculties">Faculties</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".gallery">Gallery</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".placement">Placement Cell</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".events">Events</a></li>
        </ul><!--/#portfolio-filter-->

        <ul class="portfolio-items">
            <li class="portfolio-item hod">
            <div class="item-inner">
                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>              
                    </div>           
                </div>     
                          </li><!--/.portfolio-item-->
            <li class="portfolio-item faculties" >
                <div class="item-inner">

                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>              
                    </div>           
                </div>           
            </li><!--/.portfolio-item-->
            <li class="portfolio-item gallery">
                <div class="item-inner">

                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="images/portfolio/full/item3.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>        
                    </div>           
                </div>           
            </li><!--/.portfolio-item-->
            <li class="portfolio-item placement">
                <div class="item-inner">

                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="images/portfolio/full/item4.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>          
                    </div>           
                </div>           
            </li><!--/.portfolio-item-->
            <li class="portfolio-item events">
                <div class="item-inner">

                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="images/portfolio/full/item5.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>          
                    </div>    
                </div>       
            </li><!--/.portfolio-item-->
        </ul>
    </section><!--/#portfolio-->

li标签的数据过滤器在点击hod li之前也必须正常工作。

Answer 1

试试这个，

$(function () {
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });
});

Answer 2

试试这段代码，

jQuery(function($) {
    //portfolio

    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({ filter: selector });
            return false;
        });

请在此处找到 DEMO

Answer 3

这可以帮到你

//投资组合过滤器

    $(window).load(function(){'use strict';
    if var $portfolio_selectors = $('.portfolio-filter >li>a');

    var $portfolio = $('.portfolio-items').isotope({

        itemSelector : '.hod',
        layoutMode : 'fitRows'      
    });

    $portfolio_selectors.on('click', function(){
    $portfolio_selectors.removeClass('active');
    $(this).addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio.isotope({ filter: selector });

        return false;
    });
});

Jquery删除onclick函数并替换它

3 个答案: