如果我點擊 收藏 按鈕 只會post出去頁面第一個class=“favour”的button
uj5u.com熱心網友回復：
你用jquery的話，可以這么寫$(".favour").click(function(){$(this).事件...})uj5u.com熱心網友回復：
您看是這樣寫不，我這樣寫的話還是不行
uj5u.com熱心網友回復：
用代理，你這個應該是動態生成的。
$('body').on('click', '.favour', function(){
console.log($(this))
})
body可以換成父級dom
uj5u.com熱心網友回復：
或者點誰給誰加這個class，點下一個清楚其他uj5u.com熱心網友回復：
用body的那個方法也不行，還是不能實作uj5u.com熱心網友回復：
給誰加class的話也需要用選擇器去選擇一個，好像也實作不了
uj5u.com熱心網友回復：
em。。。你可以考慮分不同的class或者id。如果不能的話，那你就拿你的按鈕文本做判斷被$(".favour").click(function(){if($(this).text() == "收藏") {//...干啥}})
uj5u.com熱心網友回復：
如果是這個效果的化 ，你需要做3 步 處理（我這個還是 v-for 里面）
1.初始化，系結好控制 按鈕顯示隱藏的值
getAllMessages(){
getAllMessages().then(res=>{
for(let i=0;i<res.data.messageBoardList.length;i++){
this.$set(res.data.messageBoardList[i], 'isEdit', false)
this.$set(res.data.messageBoardList[i], 'showRelPlayBtn', true)
this.$set(res.data.messageBoardList[i], 'DelRelPlayBtn', true)
this.$set(res.data.messageBoardList[i], 'index', i)
}
this.currentTotal = res.data.messageBoardList.length
this.messageDates = res.data.messageBoardList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
})
},
2.在 元素上系結好 屬性值 和對應的 點擊時間監聽
<el-card class="box-card" shadow="hover" v-for="messageDate in messageDates" :key="messageDate.pk_MessageBoard">
<el-avatar>{{messageDate.author}}</el-avatar>
<div class="messageContent">{{messageDate.messageContent}}</div>
<div class="commitTime"><i class="el-icon-time"></i>{{messageDate.ts}}</div>
<el-button class="delMessage" v-if="isLogin&&!messageDate.DelRelPlayBtn" @click="showDelBtn(messageDate)" type="primary" icon="el-icon-delete ">取消</el-button>
<el-button class="delMessage" v-if="isLogin&&messageDate.DelRelPlayBtn" @click="DelMessage(messageDate)" type="primary" icon="el-icon-delete ">洗掉</el-button>
<el-button class="answerMessage" v-if="isLogin&&messageDate.showRelPlayBtn" @click="showReplay(messageDate)" type="primary" icon="el-icon-chat-line-round">{{messageDate.status===0?'回復':'修改回復'}}</el-button>
<el-button :loading="ReplayBtnLoading" class="answerMessage" v-if="isLogin&&!messageDate.showRelPlayBtn" @click="replyMessage(messageDate)" icon="el-icon-chat-line-round" type="primary">確定</el-button>
<el-collapse v-show="messageDate.status" :v-model="activeNames" >
<el-collapse-item title="無心的回復:" name="1">
<div>{{messageDate.replyContent}}</div>
</el-collapse-item>
</el-collapse>
<el-input v-if="isLogin&&messageDate.isEdit" type="textarea" :rows="1" class="replyInput" v-model="messageDate.replyContent" placeholder="請輸入要回復復的內容"></el-input>
</el-card>
3.在點擊時間中 對 資料顯示按鈕的屬性進行 相應的處理
showReplay(messageDate){
this.$set(messageDate, 'isEdit', true)
this.$set(messageDate, 'showRelPlayBtn', false)
this.$set(messageDate, 'DelRelPlayBtn', false)
this.$set(messageDate, 'replyContent', '')
},
showDelBtn(messageDate){
this.$set(messageDate, 'isEdit', false)
this.$set(messageDate, 'showRelPlayBtn',true )
this.$set(messageDate, 'DelRelPlayBtn', true)
this.$set(messageDate, 'replyContent', '')
},
4. 我這里還設計到了請求的回呼函式
// 回復資訊
replyMessage(messageDate){
this.ReplayBtnLoading = true
if(!messageDate.replyContent){
this.$message({
message: '留言內容不能為空',
type: 'error'
})
this.ReplayBtnLoading = false
}else{
replayMessage({pk_MessageBoard: messageDate.pk_MessageBoard,replyContent:messageDate.replyContent,status:1}).then(res=>{
this.$set(this.messageDates[messageDate.index], 'isEdit', false)
this.$set(this.messageDates[messageDate.index], 'showRelPlayBtn', true)
this.$set(this.messageDates[messageDate.index], 'DelRelPlayBtn', true)
this.$set(this.messageDates[messageDate.index], 'replyContent', messageDate.replyContent)
this.$set(this.messageDates[messageDate.index], 'status',1)
this.ReplayBtnLoading = false
})
}
}
//洗掉回復
DelMessage(messageDate){
this.$confirm('此操作將永久洗掉該檔案, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMessage({pk_MessageBoard:messageDate.pk_MessageBoard}).then(res=>{
this.$message({type: 'success', message: '洗掉成功!'});
this.messageDates.splice(messageDate.index, 1)
for(let i=0;i<this.messageDates.length;i++){
this.$set(this.messageDates[i], 'index', i)
}
})
})
只是給你個思路，你 可以根據步驟理解我怎么處理的 ，反正最后的效果貼出來 ，如果是你要的效果，你可以嘗試去 按照我的思路去做對應的處理，（自己找到正確的思路，有個例給你，自己對應的修改改造的能力應該有吧）
uj5u.com熱心網友回復：
1樓的應該是對的吧；剛用兩個圖片控制元件試了，點擊只會彈出當前圖片的大小；
uj5u.com熱心網友回復：
還有種思路
<script type="text/javascript">
function getcontent(ss){
debugger;
alert(ss.textContent);
}
</script>
<button onClick="getcontent(this)">按鈕1</button>
<button onClick="getcontent(this)">按鈕2</button>
<button onClick="getcontent(this)">按鈕3</button>
<button onClick="getcontent(this)">按鈕4</button>
<button onClick="getcontent(this)">按鈕5</button>
LZ可以打個斷點看看
uj5u.com熱心網友回復：
完善下
<script type="text/javascript">
function getcontent(ss){
debugger;
var parentdiv = ss.parentNode;
var vv = parentdiv.childNodes;
var content='';
for(var i =0;i<vv.length;i++){
if(vv[i].tagName=="INPUT"){
content = vv[i].value;
}
}
alert(content);
}
</script>
<div>
<button onClick="getcontent(this)">按鈕1</button>
<input value="https://bbs.csdn.net/topics/11" />
</div>
<div>
<button onClick="getcontent(this)">按鈕2</button>
<input value="https://bbs.csdn.net/topics/22" />
</div> <div>
<button onClick="getcontent(this)">按鈕3</button>
<input value="https://bbs.csdn.net/topics/33" />
</div> <div>
<button onClick="getcontent(this)">按鈕4</button>
<input value="https://bbs.csdn.net/topics/44" />
</div> <div>
<button onClick="getcontent(this)">按鈕5</button>
<input value="https://bbs.csdn.net/topics/55" />
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/68776.html
標籤：JavaScript
上一篇：請問如何實作點擊<td>中任意位置就能選中<td>中的復選框
下一篇：原始碼問答：alt標簽怎么添加？