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（）vs .val（）

Answer 2

我的猜测是你的脚本块注册了在加载dom之前正在执行的click事件，因此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 ready函数中。

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

更改此行var tag = $（'＃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>")
});

麻烦的javascript

5 个答案: