javascript - JQuery 函数从多个 .js 脚本列表中加载 DIV

Question

我需要一些帮助来编写可在 Wordpress 中运行的 JQuery 函数。我试图拥有一个无序的链接列表，将不同的表单从外部站点加载到单个 Div 中。我可以正常加载 HTML 内容，但似乎无法加载表单。不幸的是我对 JQuery 和 Javascript 知之甚少。

您可以在下面和下面的 jsfiddle.com 链接中看到我正在做什么。

http://jsfiddle.net/3ct4etnj/

如果可能的话，我还希望页面加载时第一个链接已经填充在 div 中，并且我也希望能够将 class="current-form"添加到链接的表单中当前正在填充 DIV，因此我可以使用不同的样式作为当前加载的表单的视觉指示器。

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
});

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a class="link" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for Load form 1. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content2">This is the test content for Load form 2. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content3">This is the test content for Load form 3. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content4">This is the test content for Load form 4. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script>  </div>
    <div id="content5">This is the test content for Load form 5. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
</div>

如果您能提供任何帮助，我们将不胜感激。我在 stackoverflow 上发表的第一篇文章，如果我可以做些什么来改进所提供的信息，请告诉我。

提前致谢!

Answer 1

我不知道这个小部件是如何工作的，所以我不知道这是否是像这样添加表单的好方法，但如果你想做你想做的事情，你需要改变一些东西。

首先，您看不到表单，因为您隐藏了内容容器中的所有 div

.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

点击事件

$('.content-container div').fadeOut('slow');

如果您只想隐藏内容 div，则必须更加具体

.content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$('.content-container > div').fadeOut('slow');

然后要显示您的第一个表单，您只需向第一个内容添加 CSS 属性即可:

.content-container > div:first-child {
  display: block;
}

最后，要将类添加到事件链接，您可以更新单击函数以删除当前事件类链接并将其添加到新链接:

$(".link").removeClass("current-form");
$(this).addClass("current-form");

并添加新的 CSS 规则:

a.current-form {
  color: red;
}

这是最终的代码:

$(document).ready(function() {

  $(".link").click(function(e) {
        e.preventDefault();
        $(".link").removeClass("current-form");
        $(this).addClass("current-form");
        $('.content-container > div').fadeOut('slow');
        $('#' + $(this).data('rel')).fadeIn('slow');
  });
  
});

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.content-container > div:first-child {
  display: block;
}

a.current-form {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link current-form" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for Load form 1. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content2">This is the test content for Load form 2. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content3">This is the test content for Load form 3. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content4">This is the test content for Load form 4. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script>  </div>
    <div id="content5">This is the test content for Load form 5. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
</div>