两个jquery项不能一起工作
Two jquery items not working together
我正在尝试jquery同位素和Balkin Style投资组合来合作(http://codepen.io/MightyShaban/pen/eGaCf)但我不能。我可以让他们自己完美地工作,但一旦在一起就行不通了。我也尝试过noConflict(),但也没有成功。任何想法都将不胜感激。
JS代码。
// Balkin
$( document ).ready(function() {
$('.portfolio ul li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .portfolio ul').removeClass('item_open');
return false;
});
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
});
/*===========================================================*/
/* Isotope Posrtfolio
/*===========================================================*/
if(jQuery.isFunction(jQuery.fn.isotope)){
jQuery('.portfolio_list').isotope({
itemSelector : '.list_item',
layoutMode : 'fitRows',
animationEngine : 'jquery'
});
/* ---- Filtering ----- */
jQuery('#filter li').click(function(){
var $this = jQuery(this);
if ( $this.hasClass('selected') ) {
return false;
} else {
jQuery('#filter .selected').removeClass('selected');
var selector = $this.attr('data-filter');
$this.parent().next().isotope({ filter: selector });
$this.addClass('selected');
return false;
}
});
}
HTML(需要做得更整洁,我知道,对不起)
<!--Portfolio-->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<!--begin isotope -->
<div class="isotope">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected"><a href="#">All</a></li>
<li data-filter=".responsive"><a href="#">Responsive</a></li>
<li data-filter=".mobile"><a href="#">Mobile</a></li>
<li data-filter=".branding"><a href="#">Branding</a></li>
</ul>
<!--end portfolio filter -->
<!--begin portfolio_list -->
<ul id="list" class="portfolio_list">
<!--begin span4 -->
<li class="list_item col-xs-12 col-sm-4 col-md-4 responsive"><a href="#item02">
<div class="view view-first"> <img src="../overlay/images/photos/project_1.jpg" class="img-responsive" alt="Title Goes Here"> <div class="mask"> <div class="portfolio_details zoom"><h2>Nostrum mnesarchum</h2>
<span>Art / Illustration</span></div> </div> </div></a>
</li>
<!--end span4 -->
将第二个jQuery项放在一个单独的$( document ).ready(function() {});
中,就可以了。
您甚至可能还想把它放在一组完全不同的<script></script>
标签中。
相关文章:
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- document.title函数可以't设置它与php一起工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 非常简单的js测试;Don’不要和Minko一起工作
- 无法使我的文本参数与我的查询一起工作
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- 无法使vash 0.8.0与express 4.12.3一起工作
- 如何使Angular JS控制器与指令一起工作
- 无法使autocompletion与bootstrap和php代码点火器一起工作
- 注入的元素和jQuery脚本.如何让他们一起工作
- 两个独立工作的javascript函数,但不能一起工作
- 角度和砖石一起工作
- Node http-proxy-middleware 不能与本地服务器一起工作
- jQuery脚本不想一起工作
- page.js使examples/hash与hashbang:true一起工作
- javascript使jquery倒计时与UTC时间一起工作
- jQuery.not()选择器无法与类一起工作
- Rails3-可排序列表不能与wysihtml5一起工作
- 替换匹配函数给出了未定义的错误,但它与替换一起工作
- 按钮上的数据加载消息无法与ajax调用一起工作