麻烦的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

你的第一个问题是

$('#tagsbox').text()

应该是

$('#tagsbox').val()

因为#tagsbox 是一个输入字段。

还有其他问题，例如在“，”上拆分，然后修剪而不是在“，”上拆分，但我认为您的主要问题是 .text() 与 .val()

Answer 2

我的猜测是在加载 dom 之前正在执行注册 click 事件的脚本块，因此 click 事件实际上并未注册到真实元素。将您的点击事件放在 document.ready 事件中，如下所示：

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

另外，（顺便说一句）为什么要将 jQuery 与常规 javascript 混合使用？将您的隐藏标签字段更改为具有标签的 id 并执行 $('#tags').val(...) 而不是 document.getElementByName('tags').value = ...

Answer 3

您的代码中有一些问题：

1) document.getElementByName('tags')

这样的函数不存在，您尝试使用的函数是 getElementsByName（注意“s”），但由于您使用的是 jQuery，您可以使用如下选择器：

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

2) 您使用的是 text()，而不是 val()，因为 @Blair 已失效

3) 在 foreach 中，您只能访问元素索引，要访问实际元素值，您必须执行以下操作：

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

还有更多工作要做，但首先，请检查我的更正here。

Answer 4

我不熟悉在单击按钮时使用此方法调用函数

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

我通常只是放

onClick='function()'

在输入标签内。并在脚本中将函数声明为正常。

另外，我认为你应该用一个空格分隔标签。这是人们习惯的。但如果您确实决定希望能够使用多个单词标签，则用“，”而不是“，”分隔

Answer 5

首先，正如上面提到的，您的 onclick 事件的 Javascript 代码是在页面上创建元素之前注册的。因此，它不受约束。要解决这个问题，请使用 jQuery 提供的这个 dom 就绪函数来包装您的代码。

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

将此行 var tags = $('#tagsbox').text().split(", ") 更改为

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

由于 document.getElementByName 不是 JS 函数，因此您的代码中也存在语法错误。也许为它分配一个 id 或一个 name 属性来定位它。

接下来，一旦你将隐藏标签拆分成一个数组，也许可以通过这种方式遍历它们来构建它们。

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