Question

我有以下HTML标记：

<div id="app">
<div class="image">
    <div class="overlay">
        <p>Some overlay text</p>
    </div>
    <img src="https://placeimg.com/640/480/any" class="img-fluid">
</div>
<div class="info">
    <h6 class="name">Title here</h6>
    <p class="meta">Meta here</p>
</div>
<div class="info-button" @mouseover="addParentClass" @mouseout="removeParentClass">
    Mouse over here!
</div>

我想做的是每当有人将鼠标悬停在带有“信息按钮”类的div上时，某些类就会添加到上面的图像和叠加层中。

我已经将其与以下Vue.js标记一起使用：

let vm = new Vue({
el: "#app",
data:{
    isHovering: false
},
methods: {
    addParentClass (event) {
        event.target.parentElement.children[0].children[1].classList.add('active')
        event.target.parentElement.children[0].children[0].classList.add('overlay-active')

    },
    removeParentClass (event) {
        event.target.parentElement.children[0].children[1].classList.remove('active')
        event.target.parentElement.children[0].children[0].classList.remove('overlay-active')
    },
},
})

但是，似乎有很多多余的JS。我已尝试使其与之配合使用：

event.target.parent.closest('.overlay'.).classList.add('overlay-active')

还有很多类似的父/子/最接近的选择器，但是我似乎无法获得想要的结果。如何让“最近”的选择器在这里工作？

这是一个带有非常粗糙的工作示例的Codepen：Link to codepen

编辑：我想指出的是，我想在循环中使用它，所以我将有多张图像，并且我希望使覆盖图仅显示在当前图像上。

Answer 1

VueJS是反应性的。这意味着数据应驱动DOM。您不应该自己玩DOM。

向数据添加活动属性；

let vm = new Vue({
    el: "#app",
    data:{
        isHovering: false,
        active: false
    },
    methods: {
        addParentClass (event) {
           this.active = true;
        },
        removeParentClass (event) {
          this.active = false;         },
    },
})

并使DOM具有反应性；

    <div class="overlay" :class="{'overlay-active': active}" >
        <p>Some overlay text</p>
    </div>

这是更新的码本

https://codepen.io/samialtundag/pen/Jeqooq

Vue.js选择具有特定类名的最接近div

1 个答案: