iT邦幫忙

0

javascript點擊按鈕如何取得自己的索引(用name命名)

我有一份表單
因功能需求
做了一排一樣功能的按鈕(刪除)

<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc()">

這些按鈕都各自在旁邊也配了圖片
目的是要可以單獨刪除圖片(含按鈕本身)
最外層再放個div包起來~

<div id="imgDiv">

    <img src="01.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(1)">

    <img src="02.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(2)">

    <img src="03.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(3)">

    <img src="04.jpg" name="imgTag">
    <input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(4)">

</div>

以上都用name的方式命名
以方便用document.getElementsByName("name")[index]的方式
取得其相關的值或是功能(刪除)

下面是他的刪除功能

function imgDeleteFunc(num) {
    var parent = document.getElementById("imgDiv");
    var childTag = document.getElementsByName("imgTag");
    var childDelBtn = document.getElementsByName("imgDeleteBtn");
    parent.removeChild(childTag[num]);
    parent.removeChild(childDelBtn[num]);
}

上面的function我知道一定會出問題
因為..
我只要刪除第一組或中間任一組..
最後一組的圖片和按鈕刪除時就會出現異常
原因是..
物件刪除後..
排序變更了..
但按鈕本身的事件參數沒變..
導致最後一個4點了會找不到4的索引..

我想要每個按鈕在點擊時..
可以取得他自己目前的索引值..
而不是像我現在這樣設固定的~
請問該怎麼做呢?

補充:
事實上..
我可以在事件上放上this表示當下點擊物件..
<input type="button" name="imgDeleteBtn" value="刪除" onClick="imgDeleteFunc(this)">
Function可以改成..

function imgDeleteFunc(obj) {
    var parent = document.getElementById("imgDiv");
    
    parent.removeChild(obj);
}

如此修改..
可以不受index影響刪除自己(刪除按鈕自己)
但imgTag該怎麼刪除呢?
我只想到用index控制..
才會有上面的問題= =

看更多先前的討論...收起先前的討論...
用 ONLOAD 去載入所有的按鈕,然後建立索引,之後再用onClick 去叫動作
ㄜ....
對不起...小的愚鈍...
不是很懂...= =
我有補充唷~
fillano iT邦超人 1 級 ‧ 2017-05-23 11:20:01 檢舉
這種情況你還是用id吧。

另外,可以在html之後,用javascript動態產生id。

onclick嵌入的函數可以傳給他this,這樣在函數內可以知道是誰觸發。
我後面的補充有提到this
確實可以針對觸發到哪顆按鈕就刪除哪顆按鈕
但是針對處在他隔壁鄰居的img該怎麼刪呢?

我知道可以使用id
並利用for或陣列等等產生不重複的id
且..使用id來實作刪除是最明確、最直接的

但是我有上傳圖片功能
可以即時顯示上傳的圖片(同時可以產生相對應的刪除紐)

當刪除其中一張在新增
新增的那張圖會與倒數第二張圖的id重複
我知道可以記錄id來避免重複

但因為小弟目前做的結構問題
導致無法用這招~= =

所以才想到利用刪除鈕
讓圖片跟著刪除鈕的索引一起跑~一起刪除~
利用name的群組特性帶著索引值..

是想知道...
this按鈕..有沒有什麼屬性可以取得本身按鈕的索引值..

(異想天開的試了this.getindex.....沒有這個東西..XD)
fillano iT邦超人 1 級 ‧ 2017-05-23 16:36:22 檢舉
https://developer.mozilla.org/zh-TW/docs/Web/API/Node/previousSibling

不過有可能因為空格什麼的可能會有TextNode插在之間,這時繼續往前找。
我找到我要的答案了
https://jsfiddle.net/nopzp40f/

尚未有邦友回答

立即登入回答