我需要紧急帮助，因为我正在做同位素噩梦。所有这些都通过我的桌面服务器运行良好，但一旦上线，同位素项目就会重叠（请参阅http://www.skinsave.co.uk/30-2/)
我怎样才能阻止这一切的发生？我知道为什么，但我的JS已经生锈了，我一直在粘贴代码片段，但没有用。很难看到什么改变了什么，因为它在我的桌面上看起来很好！
以下是JS：
jQuery(function ($) {
var $container = $(\'#isotope-list\'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, \'item\' matches the class in the PHP
itemSelector: \'.item\'
, layoutMode: \'masonry\'
});
// init Isotope
var $grid = $(\'.grid\').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function () {
$grid.isotope(\'layout\');
});
container.imagesLoaded(function () {
container.isotope({
itemSelector: \'.item\'
});
})
$(window).load(function () {
$(\'.item\').isotope(\'reLayout\');
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $(\'#filters\')
, $optionLinks = $optionSets.find(\'a\');
$optionLinks.click(function () {
var $this = $(this);
// don\'t proceed if already selected
if ($this.hasClass(\'selected\')) {
return false;
}
var $optionSet = $this.parents(\'#filters\');
$optionSets.find(\'.selected\').removeClass(\'selected\');
$this.addClass(\'selected\');
//When an item is clicked, sort the items.
var selector = $(this).attr(\'data-filter\');
$container.isotope({
filter: selector
});
return false;
});
success: function (data) {
// Update isotope container with new data.
$container.isotope(\'remove\', $container.data(\'isotope\').$allAtoms)
$container.isotope(\'insert\', $(data))
// trigger isotope again after images have been loaded
.imagesLoaded(function () {
$container.isotope(\'reLayout\');
});
}
});
});
和PHP：
<?php $the_query = new WP_Query( \'posts_per_page=50\' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.\' \'; //create a string that has all the slugs
}
?>
<a href="<?php echo get_permalink(); ?>"> <div class="<?php echo $termsString; ?> item" > <?php // \'blogpost\' is used as an identifier (see Setp 5, line 6) ?>
<h3><?php the_title(); ?></h3>
<span id="thumbs"> <?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?></span>
<h4><i class="fa fa-calendar"></i> <?php the_date(); ?></h4>
<h5><i class="fa fa-tags"></i> <?php $categories = get_the_category();
if ( ! empty( $categories ) ) {
echo esc_html( $categories[0]->name );
} ?> </h5><BR><BR>
<h6><?php the_subtitle(); ?></h6>
<p>more <i class="fa fa-arrow-circle-right"></i>
</p>
任何帮助都会很棒！
最合适的回答,由SO网友:Howard E 整理而成
您的页面加载了jQuery错误（不使用无冲突），此外还有同位素。js似乎没有冲突。这就是为什么会出现错误，例如$未定义。一旦您通过用jQuery替换$或将函数包装到
(function($) {
$(\'selector\');// Now you can use the $ to do whatever you want.
})( jQuery );
你应该做生意。您的第一个JS文档看起来也有一个额外的}）；在最后。然后在主页中调用flex滑块
<script type="text/javascript" charset="utf-8">
$(window).load(function () {
$(\'.flexslider\').flexslider({
touch: true, // to allow for touch controls
});
});
</script>
这也是错误的，不需要冲突。
尝试以下操作：
<script type="text/javascript" charset="utf-8">
(function($){
$(window).load(function () {
$(\'.flexslider\').flexslider({
touch: true, // to allow for touch controls
});
});
})(jQuery);
</script>
或者用jQuery替换$，如下所示：
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function () {
jQuery(\'.flexslider\').flexslider({
touch: true, // to allow for touch controls
});
});
</script>
