如何更改 event.target 的 HTML

问题描述

我正在尝试执行一个函数并更改具有相同事件的 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 只会添加额外的星星，即使我将其设置为''。有人有什么想法吗？

谢谢！

解决方法

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

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

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

,

这里有一个让您的星星朝着正确方向闪耀的想法。

类似……

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 {
  
}

,

感谢我得到的答案，他们让我在课堂上思考。我决定这样做：

  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)
    }
  }

就像一个魅力！