javascript - 如果元素具有具有值的属性,我该如何应用函数
问题描述
我希望如果 svg 有属性aria-label="Like"
则执行一个函数,如果它没有属性aria-label="Like"
则执行其他函数。谁能告诉我如何选择具有属性值的属性来执行功能。
function fn() {
var likebtn = document.querySelector('.fr66n .wpO6b');
var unliked = document.querySelector('.fr66n .wpO6b svg[aria-label=Like]');
var x = document.querySelector('#demo');
if (unliked === true) {
x.innerHTML = "has"
} else {
x.innerHTML = "not"
}
}
<span class="fr66n">
<button class="wpO6b " type="button">
<div class="QBdPU ">
<span class="intro">
<svg aria-label="like" class="_8-yf5 " fill="#262626" height="24" role="img" viewBox="0 0 48 48" width="24">
<path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path>
</svg>
</span>
</div>
</button>
</span>
<button onclick="fn()">call fn</button>
<p id="demo"></p>
解决方案
document.querySelector()
如果选择器找到匹配项,或者null
没有找到匹配项,则返回该元素。它永远不会返回true
,所以unliked === true
永远不会成功。
使用if (unliked)
而不是if (unliked === true)
. DOM 元素总是真,而null
假。
推荐阅读
- reactjs - 为什么在 React 中单击按钮后 UI 不更新?
- c# - 如何将 C 程序放入 C# UWP?
- java - 为什么 Java 将 char 打印为整数?
- reactjs - react-popper 挂载位置不正确
- javascript - 在 HTML 表单底部显示 JavaScript 对象
- android - 如何在 WebView 应用程序上启用深度链接
- c# - .NET Core / .NET 5 中 BackgroundService 中 ServiceBase.OnCustomCommand 的等效项
- c# - C#用迭代创建一个数组
- flutter - Flutter:电子书应用程序:缩放和滚动文本的问题
- react-native - 在产品列表上调用模态会打开所有产品的模态,而不仅仅是被点击的那个