Question

我想检查＃inner3内的＃inner3-sub

的内容是否等于给定的字符串。如果是这样，做一些事情 - 否则，做其他事情。

$('#inner3').on("click",function(){
  if($(this).html() === randomQuestion.actualAnswer){
    $('.container').css("background-color","#0dd913");
  }else{
    $('.container').css("background-color","#e7170d");
  }
});

我感觉问题存在于$（this）.html（）选择器中，但我不知道如何从这一点开始。

作为参考，我想选择randomQuestion.answer [i]。

的字符串值

$('#inner2').append("<div id='inner3' class='animated bounceInUp'>" + "<p id='inner3-sub'>" + randomQuestion.answers[i] + "</p>" + "</div>");

[edit]对于那些想要查看所有内容的人，请查看这些粘贴文件

js - ＆gt; https://pastebin.com/aMZdDLei html - ＆gt; https://pastebin.com/xLijSzsY

Answer 1

如果您在文档或正文上绑定事件，并在click事件上搜索选择器（当然这将由jquery本身完成），则更好地创建动态控件; 你还需要修剪内容并采用不是html的文本。

$('body').on('click','#inner3',function(event){
  if($(event.target).text().trim() === 'vvf'){
     $('.container').css("background-color","#0dd913");
  }else{
    $('.container').css("background-color","#e7170d");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p id="inner1">abc</p>
  <p id="inner2">des</p>
  <p id="inner3">vvf</p>
  <p id="inner4">kk</p>
<div>

Answer 2

正如您所料，

$(this).html()会返回#inner3的 html 。如果您想获得#inner3-sub的文字，您可以这样访问它：

$("#inner3-sub").text()

Answer 3

您需要使用text()方法而不是html()。如果#inner3的文字中有空格，则需要使用$.trim()方法。

$('#inner3').on("click", function() {
    var currentText = $(this).text(),
        trimmedText = $.trim(currentText);
    if (trimmedText == randomQuestion.actualAnswer) {
        $('.container').css("background-color", "#0dd913");
    } else {
        $('.container').css("background-color", "#e7170d");
    }
});

Answer 4

由于#inner3是动态创建的，因此您应该使用delegation 并使用.find()来定位正确的元素。

$('#inner2').on("click", "#inner3", function(){   // <-- use delegation on a static parent
  var currentText = $(this).find("#inner3-sub").text().trim();  // <-- use .find()
  if (currentText == randomQuestion.actualAnswer) {
    $('.container').css("background-color", "#0dd913");
  } else {
    $('.container').css("background-color", "#e7170d");
  }
});

因此#inner3被委派（具有＆＃34;责任＆＃34;）来处理其子#inner2上发生的事件，可能是否存在当后来声明和/或修改处理程序时。

检查div中子元素的文本是否与字符串匹配

4 个答案: