javascript - 在 Joomla 中使用 JS 和 PHP 将一个模块替换为另一个模块

Question

非常需要您的帮助。我的网站上有一个页面，其中包含两个模块，其中显示了一些文章。左侧有一篇 Joomla 文章，其中包含使用 {loadposition} 显示一些短新闻的模块，右侧的模块显示长文章。我想制作一个切换器，用另一个模块替换我文章中的模块。我的代码无法正常工作如下

	

<div id="mods">{loadposition mod1}</div>
<ul>
<li><a id="mod1" href="#mod1"><img /></a></li>
<li><a id="mod2" href="#mod2"><img /></a></li>
</ul>

下面的脚本仅更改文本而不加载模块

 jQuery(document).ready(function() {
  jQuery("#mod1").click(function() {
    jQuery("#mods").html('{loadposition mod1}'); 
  });
  jQuery("#mod2").click(function() {
    jQuery("#mods").html('{loadposition mod2}'); 
  });  
});

我需要加载另一个模块 mod2，而不是与整页一起加载的 mod1。请帮助我的脚本正确工作。

Answer 1

在你的代码中

<div id="mods">{loadposition mod1}</div>
<ul>
<li><a id="mod1" href="#mod1"><img /></a></li>
<li><a id="mod2" href="#mod2"><img /></a></li>
</ul>

{loadposition mod1} 用于通过解析代码从服务器加载模块 mod1，因此如果您使用 jQuery，它只会在客户端 PC 中发生变化，但不会加载模块。为此，您可能需要 ajax。最好的方法是加载两个模块并隐藏一个模块。当有人单击第二个图像时，他们会看到另一个模块。这可能是一个更好的选择，但未经我测试:

<div id="mods1">{loadposition mod1}</div>
<div id="mods2" style="display: none">{loadposition mod2}</div>
 <ul>
    <li><a id="mod1" href="#mod1"><img /></a></li>
    <li><a id="mod2" href="#mod2"><img /></a></li>
 </ul>

我的 jQuery 代码将是

jQuery(document).ready(function() {
  jQuery("#mod1").click(function() {
    $("#mods1").css("display", "block");
    $("#mods2").css("display", "none");
  });
  jQuery("#mod2").click(function() {
    $("#mods2").css("display", "block");
    $("#mods1").css("display", "none");
  });  
});