麻煩javascript

Question

我想做一個小標籤列表doohickey添加和刪除標籤。我有一個用戶可以輸入標籤的文本框，用逗號分隔。和一個添加按鈕。我希望當用戶點擊添加按鈕來添加一個小div到盒子下面div的內部。小的div應該包含標籤和稍後要去除標籤的小x。繼承人我有什麼：

<script type='text/javascript'> 
    function tagsremove(tag) { 
    document.getElementByName('tags').value.replace('/'+tag+'\,\s/', ''); 
    } 

    $('#tagbutton').click(function(){ 
    var tags = $('#tagsbox').text().split(", "); 
    for (var tag in tags) { 
     document.getElementByName('tags').value += tag +", "; 
     $('#curtags').append("<div class='tag'>" 
     + tag 
     + " <a href='#' onlclick='tagsremove(\'" 
     + tag 
     + "\');$(this).hide();'>x</a></div>") 
    } 
    }); 
</script> 

<div class='statbox'> 
    <form method='post' action='post.php' id='writeform'> 
    <p class='subtitle'>Title</p> 
    <input type='text' name='title' id='titlebox' /><br /> 
    <p class='subtitle'>Body</p> 
    <textarea id='postbox' name='body' rows='10'></textarea><br /> 
    <p class='subtitle'>Tags</p> 
    <input type='text' id='tagsbox' /><input type='button' id='tagbutton' 
     value='Add' /> 
    <p class='subsubtitle'>Seperate by commas 
     (eg. "programming, work, job")</p> 
    <div class='subsubtitle' id='curtags'>Current Tags:</div> 
    <input type='hidden' value='' name='tags' /> 
    </form> 
</div> 

我遇到的問題是，當我點擊添加按鈕，沒有任何反應。我想解決這個問題。

Answer 1

中的.text（）你有一些問題在你的代碼中：

1）document。getElementByName（'tags'）

這樣的函數不存在，你試圖使用的函數是getElementsByName（注意's'），但由於你使用jQuery，你可以使用一個選擇器：

var hiddenTags = $('input[name=tags]'); 

2）您使用的是文字（），而不是VAL（）爲@Blair點的出

3）在foreach，你只能訪問元素的索引，訪問實際的元素值，你必須這樣做：

for (var i in tags) { 
    var tag = tags[i]; 
} 

會有更多的工作要做，但開始時請檢查我的更正here。

Answer 2

我不知道如何使用這種方法來調用一個函數一個按鈕被點擊時

$('#tagbutton').click(function(){ 

我通常只是把

onClick='function()' 

輸入標籤內。並在腳本中聲明該函數爲正常。

另外，我認爲你應該用一個空格分隔標籤。這是人們習慣的。但如果你確定你想要能夠使用多個文字標籤，然後用「，」而不是「」分隔，

Answer 3

我的猜測是你的腳本塊，註冊點擊事件正在加載dom之前執行，所以點擊事件實際上並沒有被註冊到一個真實的元素。把你的單擊事件像這樣的document.ready事件中：

$(function() { 
    $('#tagbutton').click(function(){ 
     //etc... 
    }); 
}); 

另外，（順便說一句）爲什麼用常規的JavaScript混合jQuery的？它可能會更加整潔地更改您的隱藏標記字段以使標記&執行$（'＃tags'）。val（...）而不是document.getElementByName（'tags'）。value = ...

Answer 4

你的第一個問題是，

$('#tagsbox').text() 

應該

$('#tagsbox').val() 

因爲#tagsbox是輸入字段。

還有其他的問題，比如分裂的「」再修整，而不是分裂的「」但我認爲你的主要問題是VS .VAL（）

Answer 5

首先，正如上面提到的那樣，在頁面上創建元素之前，您正在註冊onclick事件的Javascript代碼。因此，它不受約束。要解決這個問題，請使用jQuery提供的dom就緒函數來包裝代碼。

$(document).ready(function() { 
    //put code here 
}); 

改變這一行VAR標籤= $（ '＃tagsbox'）。文本（）分裂（ 「」），以

var tags = $('#tagsbox').attr('value').split(',') 

還存在，因爲文件代碼中的語法錯誤.getElementByName不是一個JS函數。也許分配一個id或一個名稱屬性來定位它。

接下來，一旦你將隱藏的標籤拆分成一個數組，或許用這種方式來遍歷它們來構建它們。

$.each(tags, function(i, val) { 
    $('#curtags').append("<div class='tag'>" 
    + val 
    + " <a href='#' onlclick='tagsremove(\'" 
    + tag 
    + "\');$(this).hide();'>x</a></div>") 
});