Javascript 更改<；p>；只需一个按钮即可多次使用

您好，我正在尝试一步一步的说明，我希望效果就像当用户点击按钮时，按钮中会有单词step1，p元素中的文本将更改为步骤1中的详细信息。之后，相同的按钮会将按钮内的单词更改为步骤2，单击后会将相同的p元素内容更改为步骤2说明javascrpt、jQuery或php是否可以

你可以用各种方式来做。您可以使用jquery或纯javascript。我想提出以下逻辑：

1） 使用第一步标签和一些跟踪步骤的变量初始化按钮（例如，

var step=1 initial

）

步骤1

2） 单击“增量变量”，获取按钮中的跨度，并使用该变量更新其内容

---

下面是

您可以尝试使用一个简单的函数来完成此操作

 <!-- this is the Details Div -->
 <div id="stepDetails"> Step Details Here </div>
 <!-- here is your button that changes with onClick binding -->
 <button id="stepButton" onClick="next_step()"> Step 1 </div>
 <script> 
      /* global arrray with details */
      var step_details = ["Intro Details", "Step 1 Details", "Step 2 Details"];
      /* global variable to track position in array */
      var current_step = 0;

      /* function to be called from onClick binding */
      function next_step() {

              current_step++;   /* increase the step variable */


              document.getElementById("stepDetails").innerHTML = step_details[current_step];


              document.getElementById("stepButton").innerHTML = "Step " + (current_step + 1);
       }

</script>

步骤详细信息在这里
第一步
/*全局arrray和详细信息*/
var step_details=[“简介详细信息”、“步骤1详细信息”、“步骤2详细信息”]；
/*用于跟踪数组中位置的全局变量*/
无功电流_阶跃=0；
/*要从onClick绑定调用的函数*/
函数下一步（）{
当前_step++；/*增加步长变量*/
document.getElementById（“stepDetails”）.innerHTML=步骤详细信息[当前步骤]；
document.getElementById（“stepButton”）.innerHTML=“Step”+（当前步骤+1）；
}

---

编辑：添加了一些注释以帮助更好地解释代码

是的，您可以使用js或jquery创建它（可能更好）。您可以简单地使用这些步骤中要更改的基函数

“

函数youfunction（）{

document.getElementById（“p”）.innnerHTML='myDetails'；
.....  
}

只是为了增加数组索引：

示例文本
第一步
让arr=[“步骤1”、“步骤2”、“步骤3”、“示例文本”]；
让计数=0；//步
函数下一步（）{
if（count<5）document.getElementById（“div”）.innerHTML=arr[count]；
计数++；
如果（count==4）count=0；//使用3停止最后一个元素上的函数
}

jquery是用javascript编写的。在jquery中可以执行的任何操作都可以在“普通”javascript中执行。是的，你可以用任何一种方式。你选哪一个取决于你。到目前为止你试过什么。。。由于我们不在这里编写代码，您必须自己努力，我们将帮助您实现这一目标。非常感谢您，这正是我所需要的！！我只能让它更改一次文本，而忘记了数组。我想知道是否可以在文本中显示图像？在div中#stepDetails？当然可以--只需在数组中包含带有步骤详细信息的标记；-）

 <!-- this is the Details Div -->
 <div id="stepDetails"> Step Details Here </div>
 <!-- here is your button that changes with onClick binding -->
 <button id="stepButton" onClick="next_step()"> Step 1 </div>
 <script> 
      /* global arrray with details */
      var step_details = ["Intro Details", "Step 1 Details", "Step 2 Details"];
      /* global variable to track position in array */
      var current_step = 0;

      /* function to be called from onClick binding */
      function next_step() {

              current_step++;   /* increase the step variable */


              document.getElementById("stepDetails").innerHTML = step_details[current_step];


              document.getElementById("stepButton").innerHTML = "Step " + (current_step + 1);
       }

</script>

    document.getElementById("p").innnerHTML = 'myDetails';
    .....  


}</script>