0

有工作的 JavaScript，但我试图将多个函数重新设计为一个通用函数，以便在构建动态 HTML 时可以重用。

我的尝试失败了 - 任何见解都将不胜感激。

这是我尝试创建一个通用功能，但这不起作用：

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

$(document).ready(function() {
    $('#'+ this.id +'Div').hide();
    $('button#'+ this.id).click(function() {
        $('#'+ this.id +'Div').toggle(400);
    });
});

});//]]>
</script>

这是我试图用上面替换的功能

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

$(document).ready(function() {
    $('#hideDetails1Div').hide();
    $('button#hideDetails1').click(function() {
        $('#hideDetails1Div').toggle(400);
    });
});

$(document).ready(function() {
    $('#hideDetails2Div').hide();
    $('button#hideDetails2').click(function() {
        $('#hideDetails2Div').toggle(400);
    });
});

$(document).ready(function() {
    $('#hideDetails3Div').hide();
    $('button#hideDetails3').click(function() {
        $('#hideDetails3Div').toggle(400);
    });
});


});//]]>
</script>

与隐藏关联 DIV 的功能挂钩的按钮

<button id="hideDetails1"  title="" class="primaryButton2">show box 1</button>
....
<br /> <!-- hide div -->
<div id="hideDetails1Div" style="border:1px solid red; width:300px; height:100px;">
     <h2>box 1</h2>
</div><!-- END OF HIDE DIV -->
4

3 回答 3

2

使用类。但是，如果您必须使用 ID：

$('#hideDetails1Div,#hideDetails2Div,#hideDetails3Div').hide();
$('button[id^="hideDetails"]').click(function(e){
  e.preventDefault();
  $('#'+this.id+'Div').toggle(400);
});
于 2013-11-12T15:00:35.730 回答
0 
$(document).ready(function() {
    hideDiv('#div1', '#show_div1');
    hideDiv('#div2', '#show_div2');
    hideDiv('#div3', '#show_div3');
});
function hideDiv(divId, toggleId) {
    $(divId).hide();
    $(toggleId).click(function() {
        $(divId).toggle(400);
        return false;
    });
}

工作演示：jsfiddle.net/H9ZG5/2/

于 2013-11-12T15:02:26.087 回答
0

就像评论中提到的 Danny 一样，使用通用类，而不是不同的 ID。此外，使用该data-*属性来存储目标 div。此外，$(window).load当您使用$(document).ready.

所以。你会有这样的事情：

<button class="toggle" data-target="div1"></button>

$('.toggle').click(function(e){
   e.preventDefault();
   $('#' + this.data('target')).toggle(400);
});

您最初尝试失败的原因之一是因为您试图this在函数内部使用隐藏的东西$(document).ready。在那种情况下，this是指文件。

如果需要，有几种不同的方法可以隐藏加载时的 div。同样，最简单的方法（在我看来）是上课。只需将一个类附加到 div，比如说“hideLoad”。然后，添加一个小 JS 将它们全部隐藏在您的准备函数中：

$('.hideLoad').hide();

或者，您可以按 ID 定位 div 并遍历它们以隐藏它们，但这需要您知道 ID，并且每次添加 div 时都必须添加到该列表中。

于 2013-11-12T15:03:01.017 回答