問題與自定義jQuery函數（顯示/隱藏）

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')">` 

它不工作（股利不顯示隱藏）。上述功能有什麼問題？

Answer 1

我會做一些更靈活的

我將數據屬性添加到標籤，描述操縱的元素。屬性值可以包含任何有效的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/

這種方法的好處是，你可以重複使用的功能隱藏不同的元素，通過不同的錨觸發。所有你需要做的就是添加數據隱藏屬性。

Answer 2

將函數放在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 3

你另一個函數中定義showhideitems()。這隱藏了全局範圍，所以你的鏈接的onclick處理程序不知道如何找到showhideitems。嘗試從其他功能中刪除showhideitems。

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