Question

有工作的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 -->

Answer 1

使用课程。但是如果你必须使用ID：

$('#hideDetails1Div,#hideDetails2Div,#hideDetails3Div').hide();
$('button[id^="hideDetails"]').click(function(e){
  e.preventDefault();
  $('#'+this.id+'Div').toggle(400);
});

Answer 2

$(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/

Answer 3

与评论中提到的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时都必须添加到该列表。

重做JavaScript函数，使所有按钮都可以重用

3 个答案: