做一個錨點切換功能，它將數據附加到textarea點擊並刪除重新點擊

Question

我嘗試做一個錨點切換功能，它將數據附加到textarea上點擊並在reclick上刪除。這裏是jsfiddle。

`

function btnsInit() 
{ 
    var i, a = document.getElementById('btns').getElementsByTagName('a'); 
    for (i = 0; i < a.length; ++i) 
{ 
    var str=document.getElementById('ta').value; 
    var index= str.indexOf(a[i]); 
    if(index!=-1) 
    { 
    a[i].onclick = btnClick; 
    } 
    else 
    { 
    str.replace(a[i],"_"); 
     } 
    } 
} 
function btnClick(e) 
{ 

    document.getElementById('ta').value += this.firstChild.nodeValue + ','; 
    xPreventDefault(e); 
    return false; 
} 

`請回復儘快

Answer 1

這裏是新的JS代碼，你可以使用它 -

<div id='btns'> 
     <p> 
      <!-- adding id to element, helps to maintain the list 
      of element which have been clicked, and also helps in 
      distinguishing between two elements have same text. 
      Dont forget to add href="#' or href="javascript:void(0)" 
      else your page may refresh and form data will be lost --> 

      <a id="a1" href='#'>category</a> 

     </p> 
     <p> 
      <a id="a2" href='#'>url</a> 

     </p> 
    </div> 
<textarea id='ta' rows='10' cols='20'></textarea></body> 

使用Javascript -

window.onload = btnsInit; 

var selected = {};//keeps list of selected links 

function btnsInit() { 
    var i, a = document.getElementById('btns').getElementsByTagName('a'); 
    for (i = 0; i < a.length; ++i) { 
     a[i].onclick = btnClick; 
    } 
} 

function btnClick(e) { 
    if (selected[this.id]) { 
     delete selected[this.id];//deleting if already been clicked 
    } else { 
     selected[this.id] = this.innerHTML;//adding to the selected list 
    } 
    updateTextArea(); 

    xPreventDefault(e); 
    return false; 
} 

function updateTextArea() { 
    var ta = document.getElementById('ta'); 
    var val = ""; 
    for (var id in selected) { 
     val += selected[id] + ","; 
    } 
    ta.value = val;//updating from selected list 
} 

function xPreventDefault(e) { 
    if (e && e.preventDefault) 
     e.preventDefault(); 
    else if (window.event) 
     window.event.returnValue = false; 
} 

有問題你代碼 -

• btnsInit實際上並未將onclick監聽器分配給<a>元素。
• 重新點擊一個鏈接沒有處理或處理不當（如果處理）。
• 使用屬性/值href=' '代替a標記刷新頁面。

更新 - 問題的意見

• 不工作我的代碼，因爲它是刷新頁面問？

  不，它不是。它缺少重新處理處理，並且btnsInit無法正常工作。

• 是刪除預定義的函數嗎？

  delete是一個JavaScript關鍵字，它刪除一個對象屬性。
  About delete keyword

• 'this'的用法是什麼？

  this是另一個關鍵字，它保存上下文中對象的引用，在這種情況下，它保存單擊的元素。 More about this keyword