gpt4 book ai didi

javascript - 如何使用 jQuery 根据数组过滤结果

转载 作者:太空宇宙 更新时间:2023-11-04 15:34:49 26 4
gpt4 key购买 nike

我的程序目前有一个内容可编辑区域,用户可以在其中输入文本,当他们按下按钮时,它会弹出输入到其下方另一个 div 的文本。我试图做到这一点,以便当用户按下按钮时,它会输出输入的文本,但也会过滤掉生成的每个 div 行(如果它包含指定数组中的以下任何单词)。

感谢任何帮助。谢谢。

这是我的代码

<body>
<div id="pbf-container">
<div class="pbf-header">
<h1> VERO Filter Program </h1>
<h3> Input Links Here </h3>
</div>
<div class="pbf-link-container" contenteditable="true">
</div>
<div class="pbf-button-control">
<button id="pbf-filter"> Filter </button>
</div>
<div class="pbf-link-output">
</div>
</div>
<!-- uncomment when finished <script src="C:\Users\andrew.lee\Desktop\VERO Filter\pbf.js"></script> -->
<script>

$('#pbf-filter').click(function(){
var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
var pbfFilterWords = ['red', 'blue', 'purple', 'green', 'orange'];
$('.pbf-link-output').html($pbfOutput)
.filter(pbfFilterWords).remove('div');
});


</script>
</body>

这是 CSS:

#pbf-container {
display: block;
width: 1080px;
margin: 0 auto;
background-color: #333;
padding: 3%;
}

.pbf-header {
text-align: center;
}

.pbf-link-container {
width: 1080px;
min-height: 300px;
background-color: #f8f8f8;
font-size: 20px;
font-family: 'Lato', sans-serif;
}

.pbf-button-control {
text-align: center;
padding: 2%;
}

.pbf-link-output {
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #fff;
}

example picture

最佳答案

您需要使用.each()循环遍历数组并检查是否 div:contains其中任何一个..如果是的话 .remove()它..实际上是坏事contenteditable div 不会为第一行创建 div .. BUT 我想我通过附加一个空 <div> 找到了解决方案到contenteditable分区

$('.pbf-link-container[contenteditable]').html('<div><br/></div>');
$('#pbf-filter').click(function(){
var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
var pbfFilterWords = ['red', 'blue', 'purple', 'green', 'orange'];
$('.pbf-link-output').html($pbfOutput);
$.each(pbfFilterWords , function(i , val){
$('.pbf-link-output > div:contains("'+val+'")').remove();
});

});
#pbf-container {
display: block;
width: 1080px;
margin: 0 auto;
background-color: #333;
padding: 3%;
}

.pbf-header {
text-align: center;
}

.pbf-link-container {
width: 1080px;
min-height: 300px;
background-color: #f8f8f8;
font-size: 20px;
font-family: 'Lato', sans-serif;
}

.pbf-button-control {
text-align: center;
padding: 2%;
}

.pbf-link-output {
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
<h1> VERO Filter Program </h1>
<h3> Input Links Here </h3>
</div>
<div class="pbf-link-container" contenteditable="true">
</div>
<div class="pbf-button-control">
<button id="pbf-filter"> Filter </button>
</div>
<div class="pbf-link-output">
</div>
</div>

关于javascript - 如何使用 jQuery 根据数组过滤结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44479577/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com