Question

这是我的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不显示/隐藏）。上述功能有什么问题？

Answer 1

将函数放在ready（）之外。您尝试呼叫的方法不在范围内。

<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>

编辑 - 你可以试试这个，但我不推荐它。

$(document).ready(function() {

  function showhideitems(itemID){
      if ($(itemID).css('display') == 'none') {
        $(itemID).show('slow'); 
      } else { 
        $(itemID).hide('slow');
      } 
  }


  $("#aID").click(function(){
                    event.preventDefault();
                    showhideitems('#players1');
                 });
});

Demo here

Answer 2

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

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

Answer 3

我会做一些更灵活的事情

我会在a标签中添加一个数据属性，描述要操作的元素。属性值可以包含任何有效的jQuery选择器。

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

JavaScript将使用data-hide属性监听所有标签上的点击事件。

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

查看示例h ttp://jsfiddle.net/emil/8xtpf/

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

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

3 个答案: