javascript - 将 DIV 替换为 JQuery 传递参数

Question

我在 JQuery 上为我的“盒子”创建通用函数时遇到问题。

我有一个包含内容的可见框，但我还有一些其他框(所有 DIV)，其中包含其他内容和表单。它可以只是一个 DIV 或完整的结构化内容。

例如，这样的结构:

| DIV CONTAINER
|---- DIV CONTACT FORM
|---- ---- DIV RESET PASSWORD
|---- DIV RESET PASSWORD
|---- DIV SIGN UP FORM
|---- DIV RULES
|---- TERMS

现在我正在像下面的代码一样手动进行盒子交换:

$( "#contact-form-link" ).on( "click", function()
{
    $( "#contact-form-link" ).fadeOut( "normal", function()
    {
        $( "#reset-password-form" ).fadeIn( "normal" );
    });
});

$( "#reset-password-form" ).on( "click", function()
{
    $( "#reset-password-form" ).fadeOut( "normal", function()
    {
        $( "#contact-form-link" ).fadeIn( "normal" );
    });
});

没必要写这么多代码!

我想创建一个带有参数的函数，因此，我可以从当前框的任何部分内的链接调用它。

类似的函数:

function exchangeBoxes(box_fadeout,box_fadein) 
{
    $("box_fadeout").on("click", function()
    {
        $("box_fadeout").fadeOut( "normal", function()
        {
            $("box_fadein").fadeIn( "normal" );
        });
    });
};

这样，我就可以从一个链接调用这个函数，传递哪个 DIV 将淡出，哪个 DIV 将淡入。

我现在使用的是#contact-form并且想要更改为#reset-password-form？

<a href="#void" onclick="exchangeBoxes(contact-form, password-form);">Click Here</a>

我需要能够从页面上任何位置的任何链接调用该函数，而无需为链接设置 ID 或 CLASS，仅适用于 DIVS。

我在另一个函数中使用一个函数，因此只有在 OUT 页​​面完成后才会加载 IN 页面。

一次只能显示一个div。当一个淡出时，另一个被调用的将淡入。始终按 ID 调用，而不是按 CLASS 调用。

欢迎为创建此通用函数提供任何帮助!

谢谢!

Answer 1

您可以将事件附加到父级 div，在 click 事件中检查元素的 id，将元素作为第一个或第二个参数传递到 exchangeBoxes，具体取决于元素的 id。

function exchangeBoxes(a, b) {
  $(a).fadeOut( "normal", function() {
    $(b).fadeIn( "normal" );
  });
}

var elems = ["contact-form-link", "reset-password-form"];

$("#container").on("click", "[id]", function(e) {
  if (this.id === elems[0]) {
    exchangeBoxes("#" + elems[0], "#" + elems[1])
  }
  if (this.id === elems[1]) {
    exchangeBoxes("#" + elems[1], "#" + elems[0])
  }
});

或在分配点击事件时使用多个选择器

var elems = ["contact-form-link", "reset-password-form"];

$("#contact-form-link, #reset-password-form")
.on("click", function(e) {
    exchangeBoxes(this, "#" 
    + elems.filter(function(id) {return id !== e.target.id})[0])

});