Question

我有一个用户可以输入的文本框，下面是可以点击的标签列表。

当用户点击代码时，会在文本框中输入该代码，并通过更改类来突出显示该代码。当用户再次单击相同的标记时，它会从文本框中删除该标记，并从标记中删除该类，以使其返回到其原始的非突出显示状态。

这会产生一个问题，即如果用户自己删除了标记，它仍然会在我们底部的标记集合中突出显示。有没有办法检查是否已从文本框中删除特定文本，以便我们可以从标记中删除该类？我在想一些jQuery，但我不知道从哪里开始

框和标签的代码是：

<div class="container">
  <textarea id="ReplyBox" placeholder="Give some more information..." class='message-content-box'></textarea>
</div>

<div class="container">
  <div class="tags">
    <a href="#" class="mytag">#tag1</a>
    <a href="#" class="mytag">#tag2</a> 
    <a href="#" class="mytag">#tag3</a>
  </div>
  <button id="Send">Send</button>
</div>

目前的jQuery是：

$(document).on("click","mytag", function(event){

    event.preventDefault();
    var text_box = $('.message-content-box');
    var space = ' '
    if(text_box.val().length == 0) {
        space = ''
    }
    var hashtag = $(this).text()

    //If already selected
    if ($(this).hasClass("selected-mytag")){
        //Remove Selected class
        $(this).removeClass("selected-mytag");

        //Removes hashtag from text box
        text_box.val(text_box.val().replace(hashtag, ""));
    } else { //If not selected
        //Add selected class
        $(this).addClass("selected-mytag");
        //Add hashtag to text box
        text_box.val(text_box.val() + space + $(this).text());
    }
});

Answer 1

像

这样的东西

$( "textarea:contains(hashtag)").hasClass("selected-mytag"));

Answer 2

这段代码对我有用：

$('.mytag').on("click", function(event){

    event.preventDefault();
    var text_box = $('#ReplyBox');
    var space = ' ';
    if(text_box.val().length == 0) {
        space = '';
    }
    var hashtag = $(this).text();

    //If already selected
    if ($(this).hasClass("selected-sticky-hashtag")){
        //Remove Selected class
        $(this).removeClass("selected-sticky-hashtag");

        //Removes hashtag from text box
        text_box.val(text_box.val().replace(hashtag, ""));
    } else { //If not selected
        //Add selected class
        $(this).addClass("selected-sticky-hashtag");
        //Add hashtag to text box
        text_box.val(text_box.val() + space + $(this).text());
    }
});
$('#ReplyBox').on('keypress paste textInput input', function(){
    $('.selected-sticky-hashtag').each(function(){
        if($('#ReplyBox').val().indexOf($(this).text()) == -1)
            $(this).removeClass("selected-sticky-hashtag");
    });
});

我在这里做的是检查输入值的每次更改，如果所有活动的标签实际包含在输入值中。我调整了一些选择器，因为你提供的代码实际上没有用。

jQuery - 检查文本框中的特定单词是否已被删除并更改元素类

2 个答案: