Question

努力向数据库提交ID号列表。 JS旨在从每个“标签”添加/删除id＃并保存到表单中。

在下面的示例中，7,1,150列表从数据库中拉出，或者由用户按此顺序输入。删除项目＃1会按预期从列表中删除,1,，但会使列表7150而不是7,150。

我正在寻找有助于消除此类情况的正则表达式。我也有其他数字组合的其他问题。例如17,160,7删除“7”会取出7,的17个。制作列表1160,7。

"Working" Example。删除第1项，取出两个逗号。

JS

$("#user-interests").on('click', '.tag', function(e){
    e.preventDefault();
    var txt = $(this).attr("id");
    var group = $(this).data("group");
    var regex = new RegExp("(\,)?"+txt+"(\,)?")
    var textList = $("#"+group+" textarea");
    console.log(txt);
    if ( $(this).hasClass("active") ){
        // Remove the class, and from the textarea
        console.log("remove from list");
        list = textList.text();
        list = list.replace(regex, '');
        $(textList).html(list);
        $(this).removeClass("active");
    } else {
        console.log("Add to list");
        textList.append(","+txt);
        $(this).addClass("active"); 
    }
    $(this).parents("form").submit();
});

HTML

<div id="user-interests" class="profile-form active">
    <button id="club-descriptions">Show Club Descriptions</button>
    <div class="tags" id="club-list">
        <textarea name="user[club-list]" class="form-control" id="club-list">7,1,50</textarea>
    </div>
    <div class="show-descriptions">
        <button class="tag active" id="1" data-group="club-list">Item 1</button>
    </div>
    <div class="show-descriptions">
        <button class="tag " id="7" data-group="club-list">Item 7</button>
    </div>
    <div class="show-descriptions">
        <button class="tag " id="150" data-group="club-list">Item 150</button>
    </div>
</div>

注意：我还考虑过使用AJAX提交每个项目而不是整个表单。如果没有其他替代方案被曝光，那就非常好。

Answer 1

也许你可以从textarea值创建数组并删除正则表达式

if($(this).hasClass("active")) {
  // Remove the class, and from the textarea
  console.log("remove from list");
  list = textList.text().split(',');
  for(var i in list) {
    if(list[i] == txt) {
      list.splice(i, 1);
      break;
    }
  }
  $(textList).html(list.join(','));
  $(this).removeClass("active");
}

Answer 2

您可以在代码中使用此正则表达式：

var regex = new RegExp("(^" + txt + ",|\\b" + txt + ",|," + txt + "$)")

＆＃13;

$("#user-interests").on('click', '.tag', function(e) {
  e.preventDefault();
  var txt = $(this).attr("id");
  var group = $(this).data("group");
  var regex = new RegExp("(^" + txt + ",|\\b" + txt + ",|," + txt + "$)")
  var textList = $("#" + group + " textarea");
  if ($(this).hasClass("active")) {
    // Remove the class, and from the textarea
    console.log("remove from list");
    list = textList.text();
    list = list.replace(regex, '');
    $(textList).html(list);
    $(this).removeClass("active");

  } else {
    console.log("Add to list");
    textList.append("," + txt);
    $(this).addClass("active");
  }

  $(this).parents("form").submit();
});

$("#club-descriptions").on('click', function(e) {
  e.preventDefault();
  $(".show-descriptions").toggleClass('active');
});

＆＃13;

<div id="user-interests" class="profile-form active">
  <button id="club-descriptions">Show Club Descriptions</button>
  <div class="tags" id="club-list">
    <textarea name="user[club-list]" class="form-control" id="club-list">7,1,50</textarea>
  </div>
  <div class="show-descriptions">
    <button class="tag active" id="1" data-group="club-list">Item 1</button>
  </div>
  <div class="show-descriptions">
    <button class="tag " id="7" data-group="club-list">Item 7</button>
  </div>
  <div class="show-descriptions">
    <button class="tag " id="150" data-group="club-list">Item 150</button>
  </div>
</div>

＆＃13;

your Fiddle modified

Answer 3

使用@ewwink中的代码我能够定义一个对我有用的选项，并清理了很多代码。

$("#user-interests").on('click', '.tag', function(e){
    e.preventDefault();
    var item = $(this).attr('id');
    var group = $(this).data('group');
    var $List = $("#"+group+" textarea");
    var list = ( $List.text() != "" ? $List.text().split(",") : [] );
    var index = list.indexOf(item);
    $(this).toggleClass("active");
    if ( index === -1 ){
        list.push(item);
    } else if ( index > -1 ) {
        list.splice(index, 1);
    }
    $List.html(list.join(","));
        $(this).parents("form").submit();
});

我也知道indexOf()的问题，但我们习惯于鼓励其他一些现有产品使用非IE浏览器。

JS Regex删除了textarea的“太多”

3 个答案: