javascript - 一个代码块阻止另一个代码块工作

Question

$('.txtags').keyup(function (event) {
	var el = $(this).val().split("\n").pop().toUpperCase();
	el = el.trim();
	$('.poptag').hide();
	$('.poptag').each(function(){
		if ($(this).text().indexOf(el) > -1) {
			$(this).show();
		}
	});
});

$('.poptag').click(function(){
	var a = $(this).text();
	var content = $('.txtags').val();
	var el = content.split("\n").pop();
	el = el.trim();
	content = content.replace(el, '') + a + "\n";
	$('.txtags').val(content);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='txtags' id='tagsart' rows="5"></textarea>

<div class='poptags' id='poptags'>
<div class='poptag'>2019</div>
<div class='poptag'>ABCPLUS</div>
<div class='poptag'>LOREM</div>
<div class='poptag'>LOREM IPSUM</div>
</div>

$('.txtags').keyup(function (event) {
    var el = $(this).val().split("\n").pop().toUpperCase();
    el = el.trim();
    $('.poptag').hide();
    $('.poptag').each(function(){
        if ($(this).text().indexOf(el) > -1) {
            $(this).show();
        }
    });
});

以上工作正常。现在我有以下内容:

$('.poptag').click(function(){
    var a = $(this).text();
    var content = $('.txtags').val();
    var el = content.split("\n").pop();
    el = el.trim();
    content = content.replace(el, '') + a + "\n";
    $('.txtags').val(content);
});

这也有效，但在点击 poptag 后 - 前一个代码块 (txtags keyup) - 无效!

这也有效，但在点击 poptag 后 - 前一个代码块 (txtags keyup) - 无效!

Answer 1

问题是当您在文本框中输入时，您没有引入换行符“\n”。所以它按预期工作正常

但是当您通过单击 poptags 来填充文本框时，您会在文本框中引入换行符“\n”。现在您还必须在您的逻辑中处理这个新 Angular 色。

将您的 txtags 点击处理函数更改为以下代码。它应该有效。

$('.txtags').keyup(function (event) {
var el = $(this).val().split("\n");
var lastEl = el.pop();
if(lastEl=="" && el.length){
    el=el.pop().toUpperCase();
}else{
    el = lastEl.toUpperCase();
}
el = el.trim();
$('.poptag').hide();
$('.poptag').each(function(){
    if ($(this).text().indexOf(el) > -1) {
        $(this).show();
    }
});
});