Question

我正在尝试使用此代码淡化div：

使用Javascript：

<script type="text/javascript">

  function show(id) {
    //document.getElementsByName(id)[0].style.visibility = "visible";
    document.getElementsByName(id)[0].fadeTo( "slow", 0.5 );
  }
  function hide(id) {
    document.getElementsByName(id)[0].style.visibility = "hidden";
  }


</script>

HTML：

<div style="width: 80px; height: 20px; background-color: red;" onmouseover="show('hej')" onmouseout="hide('hej')">
   <div id="div1" Name="hej" class="hej">Text</div>
</div>

我已经包括：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

我收到错误“TypeError：Object＃have method'fadeTo'”。谁可以帮助解决这个问题，并解释为什么它不起作用？

Answer 1

Javascript DOM元素没有fadeTo方法，你需要用jQuery包装它

$(document.getElementsByName(id)[0])

或者这样做

$('[name="'+id+'"]').eq(0).fadeTo(

Answer 2

因为您要定位DOM元素并尝试在其上调用jQuery方法。您需要选择DOM对象并将其放在jQuery集合中：

function show(id) {
    $('[name='+id+']').fadeTo("slow", 0.5);
}
function hide(id) {
    $('[name='+id+']').hide()
}

JSFiddle

我假设您将名称传递给函数，因此它是唯一的，否则您需要确保仅在当前上下文中定位元素。像这样的东西对你很有用：

JSFiddle

Answer 3

你的javascript错误：/ - 你正在尝试将jquery函数应用于javascript对象..这就是你得到Object＃错误而不是JQuery Object错误的原因。而不是getelementby id，使用JQuery选择器..看看这里：

http://blog.techplusone.com/wp-content/uploads/2012/09/jquery-Api-1.2.png 并预订了markit，这对我来说是一个巨大的帮助。

function show(id) {
   $('#' + id).show('slow');
  }
  function hide(id) {
     $('#' + id).hide('slow');
   }

Answer 4

.fadeTo是jquery对象的方法，document.getElementsByName(id)不返回jquery对象。

你可以尝试：

$('[name="'+id+'"]').eq(0).fadeTo( "slow", 0.5 );

TypeError：Object＃<htmldivelement>没有方法'fadeTo'</htmldivelement>

4 个答案: