Javascript 如何在不必加载新页面的情况下在变量集之间切换？

我正在使用PHP和JS/jQuery创建一个多语言的单页网站

只有几段文本可以互换，但没有理由让用户用图像重新加载整个页面

下面您可以看到有三个变量： 1.imgVar 2.标题 3.textVar

imgVar不会更改，但titleVar和textVar将根据所选语言的不同而有所不同

此外，这段代码还需要作为foreach循环运行，因为这将有多个实例

            <div class="col-md-4">
              <div class="portfolio-item">
                <img class="img-responsive" src="assets/img/portfolio/**imgVar**.jpg" alt="" />
            <h4><span> **titleVar** </span></h4>
            <div class="portfolio-text">
            <p><span> **textVar** </span></p>
            </div>
            </div>
            </div>

**标题大道**
**文本变量**

我不确定组织变量集（可能是JSON？或PHP数组？）的最佳方式是什么，也不确定我尝试做的事情是否可行，尤其是在不重新加载页面的情况下

我知道我很可能会使用AJAX，但除了HTML之外，我不能在任何东西上添加jQuery加载函数，这将不允许我编写PHP foreach循环

---

提前谢谢你

目标是“查询”您的数据库以显示此信息。使用PDO连接执行以下操作

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "SELECT * FROM table";
$q = $pdo->prepare($sql);
$q->execute(array());
$Query = $q->fetchAll();

你可以作弊并将其作为“函数”运行

function mySwitch($Title,$Text,$Image) {
            <div class="col-md-4">
              <div class="portfolio-item">
                <img class="img-responsive" src="assets/img/portfolio/<?php echo $Image; ?> .jpg" alt="" />
            <h4><span><?php echo $Title; ?> </span></h4>
            <div class="portfolio-text">
            <p><span><?php echo $Text; ?> </span></p>
            </div>
            </div>
            </div>
}

哪个应该显示

   <div class="col-md-4">
      <div class="portfolio-item">
        <img class="img-responsive" src="assets/img/portfolio/Image252.jpg" alt="" />
    <h4><span>My Title here</span></h4>
    <div class="portfolio-text">
    <p><span>Text goes here </span></p>
    </div>
    </div>
    </div>

我的头衔在这里
这里有文字

我会发现自己时不时地做一些类似的事情，尤其是当我有重复的代码时；使其简单易懂。此外，调试过程清晰/易于阅读

---

这是未经测试的供参考

听起来像是jquery在选择时显示/隐藏div的功能？简单地说javascript函数是您的选择吗？您可以使用jquery的函数加载。创建一个id为（比如“reload”）的div，该div在php的for循环之前开始，在循环之后结束。通过这种方式，您可以从javascript重新加载div中id为“reload”的所有内容。AJAX不会加载新页面。只要你不想改变一个非灵长类的值，你就可以重新分配。我建议你看看vue.js或angular。您可以执行类似于

{{titleVar[lang]}}

的操作，vue和angular都将刷新页面的某些部分，而无需重新加载。

   <div class="col-md-4">
      <div class="portfolio-item">
        <img class="img-responsive" src="assets/img/portfolio/Image252.jpg" alt="" />
    <h4><span>My Title here</span></h4>
    <div class="portfolio-text">
    <p><span>Text goes here </span></p>
    </div>
    </div>
    </div>