クリックすると詳細情報を表示するために、quicksand.js を使用して並べ替え可能なポートフォリオを構築しています。bootbox.js を使用しています。ポートフォリオ ブートボックスを並べ替えると、機能しなくなります。
ここで実際の動作を確認できます。ポートフォリオ セクションまでスクロールし、画像の 1 つをクリックして正しく機能することを確認してください。次に、並べ替えて再試行すると、私の問題が表示されます。
更新: コンソールを使用して問題の原因を特定しましたが、エラーを完全には理解できません。ある時点で jquery migrate を使用して、quicksand 機能を作成する必要がありましたが、これは問題の一部です。エラーは次のとおりです。
console.trace() jquery-migrate-1.2.1.js:43
migrateWarn jquery-migrate-1.2.1.js:43
Object.defineProperty.get jquery-migrate-1.2.1.js:58
$.fn.quicksand jquery.quicksand.js:34
(anonymous function) portfolio.js:36
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750
これが私のJavaScriptです：
function gallery(){
$('#branding1').click(function() { bootbox.alert('<h4>Beach Me</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#web1').click(function() { bootbox.alert('<h4>Cloud INC.</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#print1').click(function() { bootbox.alert('<h4>steampuxk co.</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print1.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#branding2').click(function() { bootbox.alert('<h4>Life is Grand</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#print2').click(function() { bootbox.alert('<h4>Snapshot</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#branding3').click(function() { bootbox.alert('<h4>Cityscape</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/branding3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#web2').click(function() { bootbox.alert('<h4>Details</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web2.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#print3').click(function() { bootbox.alert('<h4>SunnyDay</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/print3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
$('#web3').click(function() { bootbox.alert('<h4>Train Station</h4><hr><p class="subtitle"><em>Branding</em></p><img src="img/projects/web3.jpg"><p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum in mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu.</p>'); });
}
var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone();
var $filterClass = "";
$('ul.filter li').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
$itemsHolder.quicksand(
$filters,
{ duration: 1000 },
gallery
);
});
$(document).ready(gallery);
そして私のhtml：
<!-- Begin Portfolio -->
<section id="section2">
<div class="container portfolio">
<!-- Page Title -->
<div class="row page-title">
<div class="col-lg-12">
<h3>Portfolio</h3>
<hr>
<p>We also create some other stuff.</p>
</div>
</div>
<!-- Portfolio Filter -->
<div class="container text-center">
<ul id="filterOptions" class="filter nav nav-pills center-pills">
<li class="active"><a href="#" class="all">all</a></li>
<li><a href="#" class="print">print</a></li>
<li><a href="#" class="web">web</a></li>
<li><a href="#" class="branding">branding</a></li>
<li><a href="#" class="apps">apps</a></li>
<li><a href="#" class="graphic design">graphic design</a></li>
<li><a href="#" class="illustation">illustration</a></li>
</ul>
</div>
<!-- Portfolio Items -->
<div class="row">
<ul class="ourHolder no-padding">
<li class="item col-lg-4 no-padding" data-id="id-1" data-type="branding">
<a href="javascript:void(0);" id="branding1">
<img src="img/projects/thumbs/branding1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Beach Me</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-2" data-type="web">
<a href="javascript:void(0);" id="web1">
<img src="img/projects/thumbs/web1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Chris Harbour</h4>
<em>Web Design</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-3" data-type="print">
<a href="javascript:void(0);" id="print1">
<img src="img/projects/thumbs/print1.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Bildende</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-4" data-type="branding">
<a href="javascript:void(0);" id="branding2">
<img src="img/projects/thumbs/branding2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>SK Invitational</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-5" data-type="print">
<a href="javascript:void(0);" id="print2">
<img src="img/projects/thumbs/print2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Magz Killa</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-6" data-type="branding">
<a href="javascript:void(0);" id="branding3">
<img src="img/projects/thumbs/branding3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Synex</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-7" data-type="web">
<a href="javascript:void(0);" id="web2">
<img src="img/projects/thumbs/web2.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Cow</h4>
<em>Web Design</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-8" data-type="print">
<a href="javascript:void(0);" id="print3">
<img src="img/projects/thumbs/print3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Tehc9btcxh</h4>
<em>Print</em>
</span>
</span>
</a>
</li>
<li class="item col-lg-4 no-padding" data-id="id-9" data-type="web">
<a href="javascript:void(0);" id="web3">
<img src="img/projects/thumbs/web3.jpg" alt="..." />
<span class="portfolio-hover">
<span>
<h4>Infobook</h4>
<em>Branding</em>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- End Portfolio -->
誰かが見ることができれば、私はこれで運がなかった。