我正在尝试检查动态生成的段落<p>
的文本是否等于前一个动态生成的段落,并在它们(段落)相等时停止函数,并生成另一个不相同的段落等于前一个。
类似
if(prevParagraph.text() == currentParagraph.text()) {
stop.function(); // Stop the function and don't generate any paragraph
} else {
start.function(); // Start the function and generate a non repeated paragraph
}
到目前为止,我已经尝试了以下CODE(现在已经尝试了5天),尽管我可以通过console.log();
对其进行检测,但是不能阻止它生成相等的文本。
这是带有完整代码的https://codepen.io/anon/pen/XQebpN
生成文本的函数:
var checkIfTextIsTheSame;
var createMessage = function(
cardTitle,
cardDescription,
specialOrNot,
parentHTML
) {
if (cardDescription == null || cardDescription == undefined) {
var parentHTML =
"<div class='container'>" +
"<div class='parent'><p class='card-title'>" +
cardTitle +
"</p></div>" +
"</div>";
} else if (specialOrNot != null || specialOrNot != undefined) {
var parentHTML =
"<div class='container special'>" +
"<div class='special-icon-container'> <img src='https://i.imgur.com/0Ae3zdD.png' alt='Special' class='special-icon'></div>" +
"<div class='parent'><p class='card-title'>" +
cardTitle +
"</p>" +
"<p class='card-description'>" +
cardDescription +
"</p></div>" +
"</div>";
} else {
var parentHTML =
"<div class='container'>" +
"<div class='parent'><p class='card-title'>" +
cardTitle +
"</p>" +
"<p class='card-description'>" +
cardDescription +
"</p></div>" +
"</div>";
}
function createTextAfterCheck() {
$(".paragraphs-container").append(parentHTML);
if (
$(".container")
.last()
.text()
.trim() ==
$(".container")
.last()
.prev()
.text()
.trim() &&
$(".container").length > 0
) {
checkIfTextIsTheSame = true;
console.log(checkIfTextIsTheSame);
} else {
checkIfTextIsTheSame = false;
console.log(checkIfTextIsTheSame);
}
}
return createTextAfterCheck();
};
createMessage("test"); // will not be the same because there's no elements before it
createMessage("test");
createMessage("test");
非常感谢。
答案 0 :(得分:0)
也许您可以将上一条消息存储为变量,并在每次调用createMessage()时对其进行检查,如下所示:
var currentMessage = "";
function createMessage(message) {
if(message != currentMessage) {
message = currentMessage;
//change the message in your paragraph
}
}
编辑:或者,如果您不想使用变量,则可以像这样检查段落的当前innerHTML
(其中#your-paragraph
是动态生成的段落):
function createMessage(message) {
if(message != $("#your-paragraph").html()) {
message = currentMessage;
//change the message in your paragraph
}
}
答案 1 :(得分:0)
我对您的代码做了一些改动:
-简化了 createMessage()函数,因此更易于测试,
-在文本中添加了一个ID(实际上,您可以通过object
跟踪所有消息,并在需要代码时从那里选择一个消息
var checkIfTextIsTheSame;
function createMessage(mId, cardTitle, cardDescription, specialOrNot, parentHTML) {
if (cardDescription == null || cardDescription == undefined) {
parentHTML =
"<div class='container' data-mid=" + mId + ">" +
cardTitle +
"</div>";
} else if (specialOrNot != null || specialOrNot != undefined) {
parentHTML =
"<div class='container special' data-mid=" + mId + ">" +
cardTitle +
cardDescription +
"</div>";
} else {
parentHTML =
"<div class='container' data-mid=" + mId + ">" +
cardTitle +
cardDescription +
"</div>";
}
if (!createTextAfterCheck(mId)) {
$(".paragraphs-container").append(parentHTML);
}
}
function createTextAfterCheck(id) {
let check = false;
if ($(".container").last().attr("data-mid") == id && $(".container").length > 0) {
check = true;
}
return check;
}
createMessage(0, "test"); // will not be the same because there's no elements before it
createMessage(0, "test");
createMessage(0, "test");
var $form = $("#myForm");
$form.on("submit", function(e) {
e.preventDefault();
var formIsValid = false;
var formIsEmpty = true;
$("input.email").each(function() {
if ($(this).val().length > 0) {
formIsEmpty = false;
} else {
formIsEmpty = true;
}
if (
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i.test(
$(this).val()
)
) {
formIsValid = true;
} else {
formIsValid = false;
}
});
if (formIsEmpty == true) {
createMessage(1, "This field can't be empty");
}
if (formIsEmpty == false && formIsValid == false) {
createMessage(2,
"Oops, there must be an error in the provided email, please enter a valid one"
);
}
if (formIsEmpty == false && formIsValid == true) {
createMessage(3, "thank you for signing-up", " ", "thanks message");
}
});
.special .special-icon-container,
.special .parent {
display: inline-block;
vertical-align: middle;
}
.special .special-icon {
object-fit: contain;
height: 26px;
width: 26px;
padding: 0;
border: 0;
outline: 0;
margin: 0 8px;
margin-left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input type="text" class="email" form="myForm">
<input type="submit" form="myForm">
</form>
<div class="paragraphs-container"></div>
答案 2 :(得分:0)
稍微修改了您的代码(请参见CodePen)
以下是相关代码段:
function createTextAfterCheck() {
var currElement = $("<div/>").append(parentHTML);
var lastElement = $("<div/>").append($(".container").last().clone());
if (
$(".container").length > 0 &&
currElement.html() == lastElement.html()
) {
checkIfTextIsTheSame = true;
console.log(checkIfTextIsTheSame);
} else {
$('.paragraphs-container').append(currElement.html());
checkIfTextIsTheSame = false;
console.log(checkIfTextIsTheSame);
}
}