Question

我想让div透明化。这段代码在javascirpt中工作，但现在我把它转换为JQuery用于学习目的，但我得到了：

错误：未捕获的TypeError：无法读取未定义的属性“opacity”

$(document).ready(function(){
   $("#addtask").click( function() {
      if ($("#taskinput").style.opacity == "100") {
        $("#taskinput").style.opacity = "0";
      }
      else if ($("#taskinput").style.opacity == "0") {
        $("#taskinput").style.opacity = "100";
      }
    });
  });

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

我不太确定出了什么问题。

Answer 1

试试这个

$(document).ready(function(){
   $("#addtask").click( function() {
      var opacity = $("#taskinput").css("opacity");
      console.log("opacity", opacity);
      if (opacity > 0) {
        $("#taskinput").css("opacity", 0);
      }
      else if (opacity == 0) {
        $("#taskinput").css("opacity", 1);
      }
    });
  });

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

Answer 2

您需要在jQuery对象上使用jQuery方法，而不是之前使用的DOM属性。

而不是：

$("#taskinput").style.opacity = "0";

使用：

$("#taskinput").css('opacity', 0);

Answer 3

＆＃34;未捕获的TypeError：无法读取属性＆＃39; opacity＆＃39;未定义＆＃34;

错误消息显示，因为您尝试调用jQuery对象上DOM对象属性的style，您可以始终使用[0]来返回DOM对象，如：

$("#taskinput")[0].style.opacity = "0";

但是，既然您正在使用jQuery，那么最好使用jQuery方法.css()：

$("#taskinput").css("opacity", 0);

注意： opacity应介于0和1之间，100不是此属性的有效值。

＆＃13;

$(document).ready(function() {
  $("#addtask").click(function() {
    var input = $("#taskinput");
    var opacity = input.css('opacity');

    if (opacity == 1) {
      input.css('opacity', 0);
    } else if (opacity == 0) {
      input.css('opacity', 1);
    }
  });
});

＆＃13;

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>
<div id="taskinput"></div>

＆＃13;

Answer 4

你在这里错误地做了很多事情。最重要的是，只需$("#taskinput").toggle();即可完成您想要的任务。

你错了：

当您执行$("#taskinput").style.opacity时，您试图在jQuery对象上应用本机JavaScript方法。只要取消引用对象，就可以使用它，因为每个jQuery对象也伪装成一个数组。您可以通过$("#taskinput")[0]或$("#taskinput").get(0)
不透明度属性值的范围为0到1，而不是0到100.
您正在比较数字和字符串。

再次，只需使用.toggle()来做你想做的事情：

$(document).ready(function() {
  $("#addtask").click(function() {
      $("#taskinput").toggle();
  });
});

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">

</div>

Answer 5

您正在修改jQuery对象的DOM属性，不透明度从0到1，而不是从1到100

如果您只想显示或隐藏，请使用.toggle

$("#taskinput").toggle();

要使用不透明度，请尝试

$(document).ready(function() {
  $("#addtask").click(function() {
    var opc = $("#taskinput").css("opacity");
    $("#taskinput").css("opacity", opc < 1? 1: 0.5);
  });
});

#taskinput {
  background-color: red;
  height: 200px;
  width: 200px;
  opacity:0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addtask">
Click me
</button>

<div id="taskinput">
  Hello
</div>

未捕获的TypeError：无法读取未定义的属性“opacity”

5 个答案: