将此与 Javascript "Cannot read property 'querySelectorAll' of undefined" 中的选择器一起使用

Question

我正在尝试使用 This 并在 DOM

中找到一些更靠下的元素

HTML是这样的

<div class="photovignette">
        <h2><span>E</span>xplorascape</h2>
        <div class="text">
            <svg>
                <defs>
                    <mask id="maskexplora" x="0" y="0" width="100%" height="100%">
                        <rect class="alpha" x="0" y="0" width="100%" height="100%" />
                        <text class="title" x="50%" y="10%" dy="1.58em">Explorascape</text>
                    </mask>
                </defs>
                <rect class="baseexplora" x="0" y="0" width="100%" height="100%" />
            </svg>
        </div>
    </div>

所以我想做的是，对于特定的“.photovignette”，我想像这样将动画应用到“.alpha”中：

    $(".photovignette").mouseover(function () {
         anime({
             targets: this.document.getElementsByClassName("alpha"),
             scale: {
                 value: 0.7,
                 duration: 500,
                 easing: 'easeOutElastic'
             },
             loop: false,
         });

如果我只使用这个，它就可以工作。但是当我试图找到 "alpha" 它给了我这个错误： "Cannot read property 'getElementsByClassName' of undefined"

如何处理？

Answer 1

你可以试试这样的:-

$(".photovignette").mouseover(function () {
         anime({
             targets: $(this).find('.alpha'),
             scale: {
                 value: 0.7,
                 duration: 500,
                 easing: 'easeOutElastic'
             },
             loop: false,
         });

Answer 2

如果要查找悬停元素的后代元素，可以使用 .querySelector 方法：

this.querySelector(".alpha")

在jQuery中：

// `.get(index)` extracts a DOM element from the collection
$(this).find('.alpha').get(0)

如果targets应该是DOM个元素的集合，那么可以使用.querySelectorAll方法：

this.querySelectorAll(".alpha")

在jQuery中：

$(this).find('.alpha').get()

将此与 Javascript "Cannot read property 'querySelectorAll' of undefined" 中的选择器一起使用

Using This with selector in Javascript "Cannot read property 'querySelectorAll' of undefined"

javascript

this

selector