如何更改 event.target 的 HTML答案

【问题标题】：How do I change an event.target's HTML如何更改 event.target 的 HTML
【发布时间】：2021-02-13 01:46:14
【问题描述】：

我正在尝试执行一个函数并使用相同的事件更改一个 HTML 图标。基本上我所做的是添加一个带有空星图或全星图的图标，具体取决于星号旁边的项目是否是“最喜欢的”：

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

并附加一个点击事件：

$('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 只会添加额外的星号，即使在我将其设置为 '' 之后也是如此。有人有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript html icons toggle

【解决方案1】：

我是 js 新手，如果我的评论有误，请原谅我。由于您想将星号更改为填充（如果收藏）或清空（如果不收藏），我认为顺序应该是

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

我没有使用 jquery，但发现了这个关于在 jquery 中切换类的线程。希望能给你提示。 jquery change class name

【讨论】：

【解决方案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> -->

如果你使用很棒的字体，你可能不需要 css 但是......

.emptyStar {
  
}
.fullStar {
  
}

【讨论】：

w3schools.com/howto/howto_js_remove_class.asp
className.replace 也可以。 w3docs.com/snippets/javascript/…

【解决方案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)
    }
  }

像魅力一样工作！

【讨论】：