Javascript 自定义Jquery函数出现问题（显示/隐藏）

以下是我的Javascript：

<script type="text/javascript">
$(document).ready(function(){
    function showhideitems(itemID){
      if ($(itemID).css('display') == 'none')
      {
        $(itemID).show('slow'); 
      } else { 
        $(itemID).hide('slow');
      } 
    }
});
</script>

当我使用以下命令调用函数时：

`<a href="#" onClick="showhideitems('#players1')">`

---

这不起作用，div不显示/隐藏。上述功能有什么问题？

将该功能置于就绪之外。您尝试调用的方法不在范围内

<script type="text/javascript">
$(document).ready(function(){
   //do your startup/initializations here
});

 // This method should be available for you
 function showhideitems(itemID){
      if ($(itemID).css('display') == 'none')
      {
        $(itemID).show('slow'); 
      } else { 
        $(itemID).hide('slow');
      } 
  }
</script>

您在另一个函数中定义了showhideitems。这会将其隐藏在全局范围之外，因此链接的onclick处理程序不知道如何查找showhideitems。尝试从其他函数中删除showhideitems

<script type="text/javascript">
  function showhideitems(itemID){
    if ($(itemID).css('display') == 'none')
    {
      $(itemID).show('slow'); 
    } else { 
      $(itemID).hide('slow');
    } 
  }
</script>

---

我会做一些更灵活的事情

我将向a标记添加一个数据属性，描述要操作的元素。属性值可以包括任何有效的jQuery选择器

<a href="#" data-hide="#players1">Click me</a>

参见示例h

---

这种方法的好处是可以重用该函数来隐藏由不同锚触发的不同元素。您只需添加数据隐藏属性。

@KeokiZee我的问题是，通过执行：$'target'。单击函数；我不能将不同的变量传递给我的函数。根据链接，我要传递不同的ID。您可以使用jQuery版本。请参阅下面的答案。编辑版本的问题是，它只适用于1个链接。但是，我有5个显示/隐藏不同的div。如何通过变量来显示/隐藏正确的div？如果您有不同的ID，并且如果可以在代码中找出ID，您可以在click方法中对其进行编码，并将其作为参数传递给showhideitems方法。如果您正在谈论多个链接，您可以为每个链接赋予一个id属性，并在此处写入多个$id\u。单击。。。。是的，我可以这样做你是对的。但是我不知道用这个方法代替我最初使用的onClick有什么好处，如果我决定改天修改我的页面代码，onClick在某种程度上更容易编辑。太棒了！如您所说，它比其他解决方案更紧凑，更灵活。很好！

$(function(){
    $('[data-hide]').live('click', function(event){
        event.preventDefault();
        var targetEl = $(this).attr('data-hide');
        $(targetEl).toggle('slow');
    });
});

$(function(){
    $('[data-hide]').live('click', function(event){
        event.preventDefault();
        var targetEl = $(this).attr('data-hide');
        $(targetEl).toggle('slow');
    });
});