我正在研究我的作品集，其中一個部分是向我的專案展示“卡片”。我開始研究的下一件事是能夠根據專案的型別對卡片進行分類。
因此，如果我單擊“Web 開發”，它只會顯示帶有相關專案的卡片。
我有一個包含卡片所有資料的物件，一個鍵是“標簽”，其值與專案相關，例如：“Web 開發”。
然后，我可以運行“if”陳述句以僅顯示“Web Development”。
之后，我清空包含卡片的元素（div），然后使用 jQuery 附加只有正確標簽的卡片empty().append()
它有效，但它只附加一張卡。如果我在該標簽中有更多專案卡，除非我正在執行 setTimeout 但其他 div 和此類移動并使投資組合“出現故障”一段時間，否則它不會附加。
有什么建議么？
const projects = {
cards: {
card1: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "webdevelopment",
underConstruction: "no"
},
card2: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "webdevelopment",
underConstruction: "no"
},
card3: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "devOps",
underConstruction: "no"
},
},
sortCards: () => {
let cards = Object.values(projects.cards);
for (let sort of cards) {
let tagSort = sort.tag.toLowerCase();
$('.devops').click(function() {
if (tagSort == "devops") {
$('.project-container').empty().append(`
<div data-skills="${sort.skills}">
<div >
<img src="${sort.thumbnail}" alt="無法將所有內容附加到我的投資組合">
</div>
<div >
<a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
<a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="無法將所有內容附加到我的投資組合"></a>
</div>
</div>
`)
}
})
$('.webdevelopment').click(function() {
if (tagSort == "webdevelopment") {
$('.project-container').empty().append(`
<div data-skills="${sort.skills}">
<div >
<img src="${sort.thumbnail}" alt="無法將所有內容附加到我的投資組合">
</div>
<div >
<a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
<a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="無法將所有內容附加到我的投資組合"></a>
</div>
</div>
`)
}
})
}
},
// ...
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webdevelopment">#WebDevelopment</div>
<div class="devops">#DevOps</div>
<!-- Projects and skills-->
<div id="projectskill">
<div class="space-top"></div>
<div class="projectskill-content">
<!-- projects cards -->
<div class="project-container"></div>
<!-- skills-->
<div class="skills-container">
<div class="skills">
<div class="skills-text">
<span class="my-skills">MY SKILLS</span>
</div>
<div class="icons"></div>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
data-tag您可以通過向標簽元素添加類似屬性來簡化代碼。- 單擊標簽時，獲取該
data-tag屬性的值并從中找到它的相關卡片projects.cards。
嘗試這個
const projects = {
cards: {
card1: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "webdevelopment",
underConstruction: "no"
},
card2: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "webdevelopment",
underConstruction: "no"
},
card3: {
name: "",
skills: "",
thumbnail: "",
github: "",
live: "",
tag: "devOps",
underConstruction: "no"
},
},
sortCards: () => {
let cards = Object.values(projects.cards);
let container = $('.project-container');
// add sort links
let tags = [...new Set(cards.map(sort => sort.tag))];
$('.sort-links').html(tags.map(tag => `<div data-tag="${tag}">#${tag}</div>`).join(''));
// sort tags
$('.sort-links').on('click', '[data-tag]', function() {
let tag = $(this).data('tag');
let tagCards = cards.filter(o => o.tag === tag).map(sort => (`
<div data-skills="${sort.skills}">
<div >
<img src="${sort.thumbnail}" alt="無法將所有內容附加到我的投資組合">
</div>
<div >
<a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
<a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="無法將所有內容附加到我的投資組合"></a>
</div>
</div>
`));
container.html(tagCards.join(''));
})
}
}
// test
projects.sortCards();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sort-links"></div>
<!-- Projects and skills-->
<div id="projectskill">
<div class="space-top"></div>
<div class="projectskill-content">
<!-- projects cards -->
<div class="project-container"></div>
<!-- skills-->
<div class="skills-container">
<div class="skills">
<div class="skills-text">
<span class="my-skills">MY SKILLS</span>
</div>
<div class="icons"></div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/488512.html
標籤：javascript jQuery 附加
上一篇：無法在js中宣告top