Question

大家好，我正在构建一个简单的笔记应用程序，但我无法弄清楚如何实现一个功能。

我有一个卡元素和删除按钮作为此元素的子元素。我需要检查card元素子（.card-title）html值（jQuery＆＃39; s .html（））是否等于localStorage（我用来循环遍历localStorage）对象）键点击删除按钮（卡片元素的子项和卡片的标题）。然后，如果为true，我需要通过等于.card-的键删除localStorage项目。标题的HTML值。

基本上我有

.card
- .card-title（我需要获得html值）
- .card-body（与此无关）
- .delete-button（通过点击它我需要获得.card-title＆＃39; s html值）

这只是我的观点，这很可能是错误的。那么，也许，有一种更好的方法来删除我的应用程序中的笔记？

有什么想法吗？

Full code on CodePen

非常感谢您将宝贵的时间花在我的问题上！谢谢你的帮助！

所以我有这样的代码：

<div id="notes">
  <div class="container">
    <div class="form-group">
      <label for="title">Enter title</label>
      <input class="form-control" id="title"/>
    </div>
    <div class="form-group">
      <label for="body">Enter body</label>
      <textarea class="form-control" id="body"></textarea>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" @click="add">Add</button>
      <button class="btn btn-danger" @click="clear">Delete all</button>
    </div>
    <div class="card" v-for="o,t,b,c in notes">
      <div class="card-body">
        <h5 class="card-title">{{t}}</h5>
        <p class="card-text">{{o[b]}}</p>
        <a class="card-link" @click="remove">Delete</a>
      </div>
    </div>
  </div>
</div>

new Vue({
    el: "#notes",
    data: {
        notes: {}
    },
    methods: {
        add: function() {
            localStorage.setItem($("#title").val(), $("#body").val());
            location.reload(true);
        },
        clear: function() {
            localStorage.clear();
            location.reload(true);
        },
        remove: function(e) {
            for (i = 0; i < localStorage.length; i++) {
                if (
                    localStorage.key(i) ==
                    $(this)
                    .closest(".card")
                    .find(".card-title")
                    .html()
                ) {
                    alert(true);
                }
            }
        }
    },
    created: function() {
        for (i = 0; i < localStorage.length; i++) {
            this.notes[localStorage.key(i)] = [
                localStorage.getItem(localStorage.key(i)),
                "red"
            ];
        }
    }
});

Answer 1

使用jQuery，您可以使用.parent（）获取元素父元素。所以在这种情况下你应该能够做到这一点来获得你正在寻找的HTML：

$(this).parent().find('.card-title').html()

Answer 2

嗯，我自己找到了解决方案，谢谢大家的帮助！

更新的代码：

new Vue({
    el: "#notes",
    data: {
        notes: {}
    },
    methods: {
        add: function() {
            localStorage.setItem($("#title").val(), $("#body").val());
            location.reload(true);
        },
        clear: function() {
            localStorage.clear();
            location.reload(true);
        },
        remove: function(e) {
            var t = $(e.target)
                .parent()
                .find(".card-title")
                .html();
            for (i = 0; i < localStorage.length; i++) {
                if (localStorage.key(i) == t) {
                    localStorage.removeItem(localStorage.key(t));
                    location.reload(true);
                }
            }
        }
    },
    created: function() {
        for (i = 0; i < localStorage.length; i++) {
            this.notes[localStorage.key(i)] = [
                localStorage.getItem(localStorage.key(i)),
                "red"
            ];
        }
    }
});

Answer 3

使用VueJS＆＃39; $refs

为元素分配引号，可以通过$refs上的this属性访问组件中特定命名的DOM元素，例如

<div ref="myDiv">I'm a div</div> // = { myDiv: [DOMELEMENT] }

created () { 
  console.log(this.$refs.myDiv.innerHTML) // I'm a div
}

通过使用引用，您应该能够使用querySelector查询父元素的子元素，反之亦然。

Answer 4

所以我构建了这个非常简单的应用程序，以便您可以查看它 https://jsfiddle.net/vrxonsq1/2/

new Vue({
el:"#app",
data:{
form:{
    title:"",
    body:""
},
notes:[]
},
methods:{
add: function(){
    this.notes.push({
    title: this.form.title,
    body: this.form.body
  });
  this.form.title = "";
  this.form.body = "";
  this.save();
},
remove: function(title){
        this.notes.forEach(function(note,index){
    if (note.title == title){
        this.notes.splice(index,1);
    }
  })
  this.save();
},
save: function(){
    localStorage.setItem("notes", JSON.stringify(this.notes) );
}
},
created: function(){
notes = JSON.parse(localStorage.getItem("notes") );
this.notes = notes ? notes : []  
}
})

它不使用jquery，只使用vuejs，我认为这样更好

只需创建一个包含'note'对象的数组，其中每个对象都有标题和正文。

如果您有任何问题，请告诉我。

Vue.js通过点击它的相邻元素来获取元素的html值

4 个答案: