Question

问题：

我正在尝试创建一段配方说明，其中包含遍布整个段落的多个Jquery点击事件。点击后的每个事件都将从烹饪技术表中的mysql数据库中提取模态窗口中的不同幻灯片。

一种技术可能是切西红柿，切洋葱等...最终目标是让个人阅读食谱并能够点击烹饪技术，并通过幻灯片放映学习如何进行技术图片。

我的解决方案不起作用：

目前，我在整个段落中为每个点击事件嵌套多个带有唯一技术ID的标签，我将其加载到MYSQL中的配方表中的recipeInstructions字段中。在配方页面上的HTML（下面的配方页面的源代码）中，我正在进行查询和while循环，为每个引导模式事件（下面的代码）引入技术标题和技术ID，然后将其发送到处理页面以执行mysql查询。（ajax加载事件代码工作正常）。

最后，我尝试使用replaceWith在每个bootstrap模态事件中写入嵌套的标签。我这样做是因为我不想在一个数据库字段中加载每个bootstrap模态事件的所有代码。

带有嵌套标签的食谱说明

<!--RECIPE INSTRUCTIONS -->
<div id="recipe">
  <p>First you need to <a id="3">Chop the Kale</a> Then     
  place the carrots in a bowl<a id="4">Bake the Chicken</a></p> and after it has cooled...
</div>

<!-- TECHNIQUE MODAL TARGET AJAX LOAD FROM processing_techniquePages.php -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-     
labelledby="myModalLabel" aria-hidden="true">

每个食谱页底部加载的BOOTSTRAP模式事件代码：

 <?php while($techniquePages = mysqli_fetch_assoc($result2)) : ?>
    <a 
      id="<?php echo $techniquePages["techniquePagesID"]; ?>"
      href="#"
      data-toggle="modal" 
      data-href="processing_techniquePages.php?techniquePagesID=<?php echo     
      $techniquePages["techniquePagesID"]; ?>" 
      data-target="#myModal2">
      <span class="span-tech-modal">
        <?php echo $techniquePages["techniqueTitle"];?>
      </span>
    </a>
<?php endwhile; ?>

BOOTSTRAP MODAL EVENT的循环输出

</div><!-- /.modal .fade-->
//Bootstrap Modal Event that will replace the <a>. 
<div class="insert">
<a
id="3"
href="#"
data-toggle="modal"
data-href="processing_techniquePages.php?techniquePagesID=3"
data-target="#myModal2">
<span class="span-tech-modal">
Chop Kale </span>
</a>
</div>
<div class="insert">
<a
id="4"
href="#"
data-toggle="modal"
data-href="processing_techniquePages.php?techniquePagesID=4"
data-target="#myModal2">
<span class="span-tech-modal">
Baked Chicken </span>
</a>
</div>

JQUERY CODE

 <script> $(document).ready( function() { 
 var rep = $("#recipe p a #3"); 
 var repObject = $(".insert a #3"); 
 rep.replaceWith("repObject"); }); 
</script>

动态配方说明

0 个答案: