首页 > 解决方案 > 如果元素具有具有值的属性,我该如何应用函数

问题描述

我希望如果 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>

标签: javascripthtml

解决方案


document.querySelector()如果选择器找到匹配项,或者null没有找到匹配项,则返回该元素。它永远不会返回true,所以unliked === true永远不会成功。

使用if (unliked)而不是if (unliked === true). DOM 元素总是真,而null假。


推荐阅读