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" );
    });
});

这么多代码是不必要的！

我想创建一个带参数的函数，所以，我可以从当前框的任何部分内的LINK调用它。

类似的功能：

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

所以这样，我可以通过DIV将fadeOut传递的链接调用此函数，这将会淡入。

我在#contact-form，想要更改为#reset-password-form？

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

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

我在另一个函数中使用了一个函数，因此IN页面仅在OUT页面完成时加载。

每次只能显示一个div。当一个淡出时，另一个叫fadeIN。始终通过ID呼叫，而不是通过CLASS。

欢迎任何有关创建此通用功能的帮助！

谢谢！

Answer 1

您可以将事件附加到父div，检查id事件中元素的click，将元素作为第一个或第二个参数传递给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])
  }
});

或在分配click事件

时使用多个选择器

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])

});

Answer 2

您可以附加一个类，例如exchange到您的链接并使用data属性来存储您要淡入和淡出的元素的ID。

<a class="exchange" href="#" data-out="#contact-form" data-in="#reset-password-form">Click Here</a>

<a class="exchange" href="#" data-out="#reset-password-form" data-in="#contact-form">Click Here</a>

然后附上一个事件处理程序

$(".exchange").on("click", function () {
    var data = this.dataset;
    $(data.out).fadeOut("normal", function () {
        $(data.in).fadeIn("normal");
    });
});

如果你严格只关注这两个DIV，你也可以使用fadeToggle()而不必使用data属性

$(".exchange").on("click", function () {
    $('#contact-form').fadeToggle("normal", function () {
        if ($(this).is(':visible')) {
            $("#reset-password-form").fadeOut("normal");
        } else {
            $("#reset-password-form").fadeIn("normal");
        }
    });
});

Answer 3

除了上面的答案，您还可以在不使用内联onclick的情况下实现此目的。我更喜欢将javascript分开。

为每个链接指定data-link及其链接的框。 e.g。

<a href="#" data-link="#box2">Go to box 2</a>

然后在js中你可以选择这个并根据例子进行所需的淡入/淡出：

P.S。抱歉，我真的很无聊，没有更好的事情要做。

＆＃13;

$(".box a").click(function() {
  linkTo = $(this).data("link");
  $(this).parent().fadeOut("normal", function() {
    $(linkTo).fadeIn();
  });
});

＆＃13;

body {
  background: #333;
  color: #ccc;
  font-family:sans-serif;
}
.box {
  margin: 0 auto;
  width: 300px;
  border: 1px solid #ccc;
  text-align: center;
  display:none;
}

.box a {
  text-decoration: none;
  color: #ccc;
  border:1px solid #ccc;
  padding: 10px;
  margin: 0 0 10px 0;
  display: inline-block;
}

.box a:hover {
  background: #333;
  color: #ccc;
}

#box1 {
    background: #CD5C5C;
    display:block;
}

#box2 {
    background: #6B8E23;
}

#box3 {
    background: #6A5ACD;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box" id="box1">
    <h3 class="title"> I am Box 1 </h3>
    <a href="#" data-link="#box2">Go to box 2</a> 
    <br>
    <a href="#" data-link="#box3">Go to box 3</a>
  </div>

  <div class="box" id="box2">
    <h3 class="title"> I am Box 2 </h3>
    <a href="#" data-link="#box1">Go to box 1</a> 
    <br>
    <a href="#" data-link="#box3">Go to box 3</a>
  </div>

  <div class="box" id="box3">
    <h3 class="title"> I am Box 3 </h3>
    <a href="#" data-link="#box1">Go to box 1</a> 
    <br>
    <a href="#" data-link="#box2">Go to box 2</a>
  </div>

</div>

＆＃13;

Answer 4

好的，谢谢大家！

我将所有回复放在一起并想出了这个：

MainActivity.w()

JQuery很干净：

Log.d()

非常感谢，伙计们！

用JQuery传递参数替换DIV

4 个答案: