jQuery：如果文本是临时的，如何根据":contains(…)"添加JavaScript警报？

Question

我想改变一个h1如果一个特定的div被点击。我已经编码了这个，它工作得很好。但是:现在，我想为每个标题添加特定的点击警报.

我试过了:

// This works:
let myText = "Hello"
$("#one").on("click touchstart", function() {
myText = "One";
$("h1").text("One");
return false;
});
$("#two").on("click touchstart", function() {
myText = "Two";
$("h1").text("Two");
return false;
});
$("body").on("click touchstart", function() {
myText = "Hello"
$("h1").text(myText);
});

// This works not:
$("h1:contains('Hello')").click(function() {
alert("Hello. Some text.");
});
$("h1:contains('One')").click(function() {
alert("Here is text to One.");
});
$("h1:contains('Two')").click(function() {
alert("Two is very cool.");
});

* {
font-family: Arial;
cursor: default;
}
.active {
background-color: yellow;
}
div {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
float: left;
}
div:nth-of-type(1) {
background-color: green;
}
div:nth-of-type(2) {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello</h1>
<div id="one">Click me</div>
<div id="two">Click me</div>

例如:如果您单击绿色框，然后单击包含"one"的标题，则应该有一个警告。

我已经尝试过:contains(…)，但不幸的是，它不起作用。

非常感谢你的帮助!& lt; 3

是的，这种复杂性是必要的，因为最终将集成许多其他功能。

Answer 1

使用一个开关箱来分割你的功能。

// This works:
let myText = "Hello"
$("#one").on("click touchstart", function() {
myText = "One";
$("h1").text("One");
return false;
});
$("#two").on("click touchstart", function() {
myText = "Two";
$("h1").text("Two");
return false;
});
$("body").on("click touchstart", function() {
myText = "Hello"
$("h1").text(myText);
});
// If you want to split up functionality
$("h1").click(function() {
switch($(this).html()) {
case 'One':
alert("Here is text to One.");
break;
case 'Two':
alert("Two is very cool.");
break;
case 'Hello':
alert("Hello. Some text.");
break;
default:
// code block
} 
});

* {
font-family: Arial;
cursor: default;
}
.active {
background-color: yellow;
}
div {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
float: left;
}
div:nth-of-type(1) {
background-color: green;
}
div:nth-of-type(2) {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello</h1>
<div id="one">Click me</div>
<div id="two">Click me</div>

Answer 2

在脚本运行时基于匹配的文本绑定单击事件。每次单击其他元素之一时，您都可以删除并重新附加。

<script>
const rebind = () => {
$("h1").off("click touchstart");
$("h1:contains('Hello')").click(function () {
alert("Hello");
});
$("h1:contains('One')").click(function () {
alert("One");
});
$("h1:contains('Two')").click(function () {
alert("Two");
});
}
rebind();
let myText = "Hello"
$("#one").on("click touchstart", function () {
myText = "One";
$("h1").text("One");
rebind();
return false;
});
$("#two").on("click touchstart", function () {
myText = "Two";
$("h1").text("Two");
rebind();
return false;
});
$("body").on("click touchstart", function () {
myText = "Hello"
$("h1").text(myText);
rebind();
});
</script>