jquery 如果文本区域包含此文本,则运行查询

wqsoz72f  于 2023-03-22  发布在  jQuery
关注(0)|答案(3)|浏览(167)

这是我的代码:

$(document).ready(function () {
   if ($("#write_text_id").text() === "Saurav & Kunal Are God") {
      $(".submit_form_field").addClass('item-3');
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

我希望如果我在文本区写“Saurav和Kunal是上帝”,那么提交按钮将添加item-3类。

stszievb

stszievb1#

您要查找的是EventListener而不是document.ready,以查看文本框的更改。
请注意,document.ready只会在最初加载文档时从我添加的console.log调用一次:

$(document).ready(function() {
  console.log("test");
  if ($("#write_text_id").text() === "Saurav & Kunal Are God") {
    $(".submit_form_field").addClass('item-3');
  }
});
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>

但是,在使用EventListener时,您将在单击提交按钮时获得所需的结果:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
另外值得注意的是,我使用了$("#write_text_id").val(),因为.text()没有返回任何内容。

juud5qan

juud5qan2#

你应该在输入时检查,而不是一次。为此,在jQuery中,你可以使用on('input', function),如here所解释的。
我个人删除类时,它是错误的,使它消失时,文本再次改变。

$(document).ready(function () {
    $("#write_text_id").on('input', function (e) {
        if (e.target.value === "Saurav & Kunal Are God") {
           $(".submit_form_field").addClass('item-3');
        } else
           $(".submit_form_field").removeClass('item-3');
    });
});
.item-3 {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
  <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
</div>
1qczuiv0

1qczuiv03#

$('#write_text_id').on('keyup',function(){
        if ($('#write_text_id').val() === "Saurav & Kunal Are God") {
        
          $(".submit_form_field").addClass('item-3');
        }
        else
        {
         $(".submit_form_field").removeClass('item-3');
        }
    });
.item-3 {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="test">
    <textarea id="write_text_id" class="textarea small" tabindex="105" placeholder="Write Saurav &amp; Kunal Are God" rows="4" cols="50"></textarea>
    <input id="submit_btn_id" class="submit_form_field" type="submit" value="Submit">
    </div>

相关问题