私は JS のこれらの新しいものです。
このコードには、特定のコンテンツ (ALL、A、B、C) を持つアイテムを表示する機能があります。
コードはボタンでうまく機能しますが、ボタンを「ドロップダウン選択」で機能させることはできません。ヘルプ。
これがコードです
I was trying to make this work, but it dosent:/
<select class="dropdown-select" id="portfolio-sort">
<option><a href="#" id="all">ALL</a></option>
<option><a href="#" data-cat="a">A</a></option>
<option><a href="#" data-cat="b">B</a></option>
<option><a href="#" data-cat="c">C</a></option>
</select>
あなたが抱えていた問題は、選択オプションにリンクを挿入しようとしていたことです。それはうまくいきません。
必要なソリューションは次のとおりです。
js
var Portfolio = {
sort: function(items) {
items.show();
$('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(300);
},
showAll: function(items) {
items.fadeIn(300);
},
doSort: function() {
$('#portfolio-select').on('change', function() {
var val = $(this).find(':selected').data('cat')
if (val != undefined) { // it will be `undefined` for `all` because there is no `data-cat` on that object
var items = $('div[data-cat=' + val + ']', '#portfolio-content');
Portfolio.sort(items);
} else {
Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));
}
});
}
};
Portfolio.doSort();
html
<div id="portfolio">
<div id="portfolio-sort">
<select id="portfolio-select">
<option id="all">ALL</option>
<option data-cat="a">A</option>
<option data-cat="b">B</option>
<option data-cat="c">C</option>
</select>
</div>
<div id="portfolio-content">
<div class="portfolio-item" data-cat="a">A</div>
<div class="portfolio-item" data-cat="b">B</div>
<div class="portfolio-item" data-cat="c">C</div>
<div class="portfolio-item" data-cat="c">C</div>
<div class="portfolio-item" data-cat="b">B</div>
<div class="portfolio-item" data-cat="a">A</div>
<div class="portfolio-item" data-cat="a">A</div>
<div class="portfolio-item" data-cat="c">C</div>
<div class="portfolio-item" data-cat="b">B</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加