将 json 数据加载到展开的按钮中 - bootstrap 4 beta

Question

您好，我正在尝试将格式为 javascript 对象的 js 文档中的一些数据格式化并插入到折叠的 div 中的一个 div 中，当您单击按钮时它会展开。 我正在使用传单并使用完全相同的数据，并且将 json 数据插入地图弹出窗口没有问题。 jquery append 根本不起作用，即使我只是尝试附加文本也没有任何显示。 我已经从一堆不同的问题中尝试了大约 10 种不同的解决方案，但仍然没有任何结果。 我正在使用 bootstrap 4 beta。

最新的 js 尝试：

$(document).ready(function(){
    $('button').click(function(){

        $('#everydayFoodContent').append('<p>hello!</p>');
    });    
});

我也试过了

$('#everydayFoodContent').append('<p>hello!</p>');

单独使用，但这仍然行不通。 我也试过这个：

$everydayFoodContent=$('#everydayFoodContent');
$everydayFoodContent.append('<p>hello!</p>');

我也尝试过使用“console.log('#everydayFoodContent');”，因为我已经看到类似问题的其他答案建议这样做来检查并确保 div 可用（我认为）但老实说我不知道​​这样做的目的是什么console.log 是或者我应该看到它是否有效，并且无法在网上找到任何简明扼要地解释这一点的东西。当我包含它时，控制台中不会显示与此 div 相关的任何内容，如果这有帮助的话。

这是html：

<button class="btn btn-light" data-toggle="collapse" data-target="#everydaycollapse" aria-expanded="false" aria-controls="everydaycollapse">
  Everyday</button> 
<div class="collapse" id="everydaycollapse">
  <div class="card card-block" id="everydayContent">
      <div id="everdayFoodContent">Food</div><br><br>
      <div id="everdayDrinkContent">Drink</div>
  </div>
    </div>

Answer 1

这似乎是一个简单的拼写错误。您拼写了有问题的 div 的 ID“everdayFoodContent”，并尝试在 jQuery 调用中将其附加为 id “everydayFoodContent”。 注意“y”。

将您的附加更改为此将解决问题：

 $('#everdayFoodContent').append('<p>hello!</p>');

或者，您也可以修改您的 div ID 以使其具有正确的拼写，如下所示：

<div id="everydayFoodContent">Food</div><br><br>

假设您只需要决定如何拼写它！ ;)

编辑

我已经附上了工作 HTML 和 CSS 的完整代码，所以也许它会更容易。将这些复制并粘贴到您的项目中。如果它有效，那么您的代码中还有其他一些语法错误。如果不是，那么您可能错误地将 jQuery 加载到您的文件中。

HTML

<button  class="btn btn-light" data-toggle="collapse" data-target="#everydaycollapse" aria-expanded="false" aria-controls="everydaycollapse">Everyday</button> 
<div class="collapse" id="everydaycollapse">
    <div class="card card-block" id="everydayContent">
        <div id="everydayFoodContent">Food</div><br><br>
        <div id="everdayDrinkContent">Drink</div>
    </div>
</div> 

jQuery

$(document).ready(function(){
    $('button').click(function(){
        console.log("button clicked");
        $('#everydayFoodContent').append('<p>hello!</p>');
    });    
})

我已经验证，只要单击按钮，此代码就会成功附加字符串。它确实应该在您的浏览器中运行。如果不是，则可能是缺少依赖项或环境中的其他内容。