хлопотный 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 () vs .val ()

Answer 2

Я предполагаю, что ваш скрипт-блок, который регистрирует событие click, выполняется перед загрузкой dom, поэтому событие click фактически не регистрируется в реальном элементе. Поместите ваше событие click в document.ready, например:

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

Кроме того, (в качестве отступления), зачем смешивать jQuery с обычным javascript? Вероятно, было бы лучше изменить поле скрытых тегов, чтобы иметь идентификатор тегов & do $ ('# tags'). Val (...), а не document.getElementByName ('tags'). Value = ...

Answer 3

В вашем коде есть некоторые проблемы:

1) document.getElementByName ('tags')

То, что такой функции не существует, вы пытаетесь использовать функцию getElementsByName (обратите внимание на 's'), но, поскольку вы используете jQuery, вы можете использовать селектор, например:

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

2) Вы используете text (), вместо val () в качестве @ Blair point out

3) В foreach вы получаете доступ только к индексам элементов, для доступа к фактическому значению элемента вы должны сделать что-то вроде этого:

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

Будет еще много работы, но для начала проверьте мои исправления здесь .

Answer 4

Во-первых, как уже упоминалось выше, ваш Javascript-код для события onclick регистрируется до создания элемента на странице. Таким образом, это не связано. Чтобы это исправить, используйте, оберните ваш код в функцию dom ready, предоставляемую jQuery.

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

Измените эту строку var tags = $ ('# tagsbox'). Text (). Split (",") на

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

В вашем коде также есть синтаксическая ошибка, поскольку document.getElementByName не является функцией JS. Возможно, назначьте ему идентификатор или атрибут имени, чтобы нацелить его.

Далее, после того как скрытые теги разбиты на массивы, возможно, пройдитесь по ним таким образом, чтобы построить их.

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

Answer 5

Я не знаком с использованием этого метода для вызова функции при нажатии кнопки

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

Я обычно просто ставлю

onClick='function()'

внутри тега ввода. и объявить функцию как обычно в скрипте.

Кроме того, я думаю, что вы должны разделять теги одним пробелом. это то, к чему люди привыкли. но если вы решили, что хотите иметь возможность использовать несколько тегов слов, разделите их символами "," not ","