时间戳

首页 > 解决方案 > 为什么 .css() 不适用于条件语句 bool 是真的？

javascript - 为什么 .css() 不适用于条件语句 bool 是真的？

问题描述

$(function() {

  if ($("p").text().length > 20) {
    console.log("length > 20")
    $(this).text().css("color", "red")
  } else {
    console.log("opps")
  }
  
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quisquam asperiores eius quasi assumenda error dolorem? Quo sit quaerat ex quia inventore totam, officiis beatae, explicabo quod vitae et exercitationem.</p>

在这种情况下。控制台显示 $(...).text(...).css 不是函数

我不知道哪里错了？即使测试使用 .text() 也没有感觉

为什么文本中的 p 标签不会变成红色字？?

标签： javascripthtmljquery

解决方案

.text()返回一个字符串。字符串没有.css方法——只有 jQuery 集合有.css方法。

另外，this在您的代码中没有引用<p>. 首先将 jQuery 集合保存<p>在一个变量中，以便调用.css它（或$('p')再次调用）。

const $p = $("p");
if ($p.text().length > 20) {
  console.log("length > 20")
  $p.css("color", "red")
} else {
  console.log("opps")
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quisquam asperiores eius quasi assumenda error dolorem? Quo sit quaerat ex quia inventore totam, officiis beatae, explicabo quod vitae et exercitationem.</p>

推荐阅读