Question

这是我制作的简单书签应用程序的一段代码。我对此有些困惑。
看看代码的第3行。在==之后，是否应该=而不是classname？因为=是赋值运算符。我需要的是true ==或===应该给出的console.log确实来自===。

但是当我在if语句中使用=时，该函数不再有效。但它适用于document.querySelector('.bookmarks').addEventListener('click', deleteBookmark); function deleteBookmark(e) { if (e.target.className = 'delete') { e.target.parentNode.parentNode.removeChild(e.target.parentNode); console.log(e.target.className === 'delete'); //console.log(e.target.parentNode.getElementsByTagName('p')[0].textContent); for (let i = 0; i < bookmarks.length; i++) { if (bookmarks[i].name === e.target.parentNode.getElementsByTagName('p')[0].textContent) { bookmarks.splice(i, 1); break; } } } }，这对我没有任何意义。如果有人能够澄清这里的问题，那将会很棒。

如果有人想检查包含HTML和CSS的完整代码，请点击此处：https://github.com/magnetickode/Bookmarking-App

{{1}}

Answer 1

改变这个：

if (e.target.className = 'delete') {

到

if (e.target.classList.contains('delete')) {

Answer 2

在if语句中，我们应该使用任何转化为boolean的内容，因此，正如您所提到的，简单分配没有意义，因为它始终返回true。 e.target.className包含元素的所有类，因此如果有多个类，则不能只执行e.target.className == 'delete'或e.target.className === 'delete'，因为字符串不相等（{{1}包含"q w e"，但"q"不等于"q"）。我明白了，您正在使用ES6，因此您可以执行"q w e"，检查该元素是否包含类e.target.className.includes('delete')，（有关字符串的delete方法的详细信息：{ {3}}）。也可以使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes之类includes来测试是否存在类（或element.className.indexOf('class') !== -1来测试它的缺席）。

这是一个例子：

＆＃13;

=== -1

＆＃13;

const bookmarks = document.querySelectorAll('.bookmarks');
for (let i = 0; i < bookmarks.length; i++) {
  bookmarks[i].addEventListener('click', deleteBookmark);
}

function deleteBookmark(e) {
  alert("Target contains 'delete' class? " + e.target.className.includes('delete').toString().toUpperCase());
  /*if (e.target.className.includes('delete')) {
    e.target.parentNode.parentNode.removeChild(e.target.parentNode);

    for (let i = 0; i < bookmarks.length; i++) {
      if (bookmarks[i].name ===e.target.parentNode.getElementsByTagName('p')[0].textContent) {
        bookmarks.splice(i, 1);
        break;
      }
    }
  }*/
}

＆＃13;

比较运算符。 JavaScript中的赋值运算符

2 个答案: