代码之家 › 专栏 › 技术社区 › The.Anti.9

麻烦的javascript

html jquery javascript

The.Anti.9 · 技术社区 · 16 年前

我正在做一个小标签列表,用来添加和删除标签。我有一个文本框,用户可以在其中输入用逗号分隔的标记。还有一个添加按钮。我希望当用户单击“添加”按钮将一个小的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>

我遇到的问题是,当我单击“添加”按钮时,什么都不会发生。我想修这个。

5 回复 | 直到 16 年前

Community CDub 8 年前

您的代码中存在一些问题:

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 .

Blair Mitchelmore 16 年前

你的第一个问题是

$('#tagsbox').text()

应该是

$('#tagsbox').val()

因为tagsbox是一个输入字段。

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

Alconja 16 年前

我猜是您的脚本块在加载DOM之前注册了click事件,所以click事件实际上没有注册到真正的元素。将您的Click事件放入文档中。Ready事件如下:

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

另外,(顺便说一下)为什么要将jquery与常规的javascript混合在一起?将隐藏的标记字段更改为具有标记ID&do$('标记').val(…)而不是document.getElementByName('标记').value=…

Nathan 16 年前

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

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

我通常只是把

onClick='function()'

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

另外,我认为应该用一个空格来分隔标记。这是人们习惯的。但是,如果您决定要使用多个单词标记,则用“,”而不是“,”分隔。

DLS 16 年前

首先,正如上面提到的,在页面上创建元素之前,您的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或一个名称属性来作为目标。

下一步,一旦将隐藏的标签分割成一个数组,就可以通过这种方式遍历它们来构建它们。

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