php - 类型错误：对象#没有方法'fadeTo'

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 # has no 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 和book 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 );