Question

我有一个网页，初始页面上有4个div。当页面首次加载时，仅可见home div，其他三个隐藏。

有一些按钮连接到jquery click事件上，以使当前可见的div“消失”，并使用户选择的div“出现”。

到目前为止，每个按钮都有其自己的整个jquery click事件，其中直接将旧的div名称“蒸发”，将新的div名称“显示”直接硬编码到其中。

这似乎是不必要的代码重复。

我希望有一个单一的jquery click-event，它仅接受两个字符串变量，一个字符串变量代表旧的div来“蒸发”，另一个字符串变量代表新的div来“出现”，然后每个html-按钮具有存储在其中的两个字符串变量。

我不知道该怎么做。

        <div id="homeDiv">HOME PAGE CONTENT</div>

        <div id="contactDiv">CONTACT CONTENT</div>

        <div id="resumeDiv">RESUME CONTENT</div>

        <div id="portfolioDiv">PORTFOLIO CONTENT</div>

<script>

     $('#contactButton').click(function() {

          $('#homePage').addClass('blur-out-expand-fwd');

          setTimeout(function() {

            $('#homePage').hide();
            $('#contactPage').show();
            $('#contactPage').addClass('focus-in-contract-bck');

          }, 500);

        });


        $('#contactHomeButton').click(function() {

          $('#contactPage').addClass('blur-out-expand-fwd');

          setTimeout(function() {

            $('#contactPage').hide();
            $('#homePage').show();
            $('#homePage').addClass('focus-in-contract-bck');

          }, 500);

        });

 </script>

Answer 1

我想出了一个解决方案：

给所有按钮一个“ navButton”类，然后将其附加到jquery click事件，然后每个按钮元素都有一个oldDiv属性和一个newDiv属性，该属性可以被click事件读取，如下所示：

联系

$（'。navButton'）。click（function（）{

 var oldDiv = "#" + $(this).attr("oldDiv");
 var newDiv = "#" + $(this).attr("newDiv");

$(oldDiv).addClass('blur-out-expand-fwd');
$(oldDiv).removeClass('focus-in-contract-bck');
$(newDiv).removeClass('blur-out-expand-fwd');
$(newDiv).removeClass('focus-in-contract-bck');

setTimeout(function(){

    $(oldDiv).hide();
    $(newDiv).show();
    $(newDiv).addClass('focus-in-contract-bck');

},500  );

}）;

使用Jquery变量使不同的DIV出现和消失

1 个答案: