如何更改 event.target 的 HTML

Question

我正在尝试执行一个函数并更改具有相同事件的HTML图标。基本上，我所做的就是添加一个带有空星号或满星号图形类的图标，这取决于星号旁边的项目是否为"收藏夹"不信:

<i class="${starStatus} fa-star"></i>

并附加一个click事件:

$('i').click(User.toggleFavorite)

执行函数的。该函数的目的是向收藏数据库添加离星号最近的故事，然后将星号更改为填充(如果是收藏)或清空(如果不是收藏)。我不知道如何改变事件目标的HTML，使其填充或清空。下面是有问题的函数:

static async toggleFavorite(evt){
let star = (evt.target.closest('i'))
const storyToFavoriteId = evt.target.closest('li').id
let storyToToggle = await axios.get(`${BASE_URL}/stories/${storyToFavoriteId}`)
storyToToggle = storyToToggle.data.story
const isStoryAFavorite = User.checkIfFavorite(storyToToggle);
if(isStoryAFavorite){
//change the star to empty <i class="$far fa-star"></i>
} else {
//change the star to be filled: <i class="$fas fa-star"></i>
}
}

唯一重要的部分实际上是底部的if/else语句。更改innerHTML只会增加额外的星号，即使我已经将其设置为"。有人有什么想法吗?

谢谢!

Answer 1

我是js的新手，如果我的评论是错误的，请原谅我。由于您希望将星号更改为填充(如果收藏)或清空(如果未收藏)，因此我认为顺序应该是

if(isStoryAFavorite){
//change the star to be filled
} else {
//change the star to empty    
}

我没有使用jquery，但在jquery中发现了这个关于切换类的线程。希望它能给你提示。Jquery更改类名

Answer 2

让你的星星朝着正确的方向闪耀。

像是…

let favStar = document.getElementById('favStar') 
let starred = false
favStar.addEventListener('click', favStatus)

function favStatus() {
//if user 'unFavorites'
if (starred === true) {
//change icon to empty
favStar.classList.add(emptyStar)
favStar.classList.remove(fullStar)
//change status
starred = false
} else {
//change icon to 
favStar.classList.add(fullStar)
favStar.classList.remove(emptyStar)
// make favorite
starred = true
}
}

<span id='favStar' class='emptyStar'>_</span>

<!-- will look like this when clicked
<span id='favStar' class='fullStar'>_</span> -->

如果你使用的字体是awesome，你可能不需要CSS，但是…

.emptyStar {

}
.fullStar {

}

Answer 3

感谢你们给我的答案，它们让我在课堂上思考。我决定这样做:

static async toggleFavorite(evt){
let star = (evt.target.closest('i'))
const storyToFavoriteId = evt.target.closest('li').id
let storyToToggle = await axios.get(`${BASE_URL}/stories/${storyToFavoriteId}`)
storyToToggle = storyToToggle.data.story
const isStoryAFavorite = User.checkIfFavorite(storyToToggle);
if(isStoryAFavorite){
star.classList.remove('fas')
star.classList.add('far')
User.removeFromFavorites(storyToToggle.storyId)
} else {
star.classList.remove('far')
star.classList.add('fas')
User.addToFavorites(storyToToggle.storyId)
}
}

工作像一个魅力!