Question

您好我正在尝试格式化并将格式为javascript对象的js文档中的某些数据插入到折叠div内的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＆＃34; everday FoodContent＆＃34;，并且您尝试使用id＆＃34; 每天附加它> FoodContent＆＃34;在jQuery调用中。 请注意＆＃39; y＆＃39;。

更改您的附加内容可解决此问题：

SQL> desc TBLUSERFINGER_HORIZONTAL;Name                    
----------- -------- --------------------------
ROW_ID                             NUMBER        
USERID(PK)            NOT NULL     NVARCHAR2(75)
FINGER_1_TEMPLATE                  BLOB         
FINGERID_1            NOT NULL     NVARCHAR2(20)   
FINGER_1_ISLOCKED                  NUMBER(3)     
FINGER_1_ISDUPLICATE               NUMBER(3)
FINGER_2_TEMPLATE                  BLOB
FINGERID_2            NOT NULL     NVARCHAR2(20)   
FINGER_2_ISLOCKED                  NUMBER(3)     
FINGER_2_ISDUPLICATE               NUMBER(3)
FINGER_3_TEMPLATE                  BLOB
FINGERID_3            NOT NULL     NVARCHAR2(20)   
FINGER_3_ISLOCKED                  NUMBER(3)     
FINGER_3_ISDUPLICATE               NUMBER(3)
...
...
...
FINGER_10_TEMPLATE                  BLOB
FINGERID_10            NOT NULL     NVARCHAR2(20)   
FINGER_10_ISLOCKED                  NUMBER(3)     
FINGER_10_ISDUPLICATE               NUMBER(3)
SQL>

或者，或者，您可以修改div ID以获得正确的拼写：

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

假设你只需要决定你想要拼写它的方式！ ;）

修改

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

<强> HTML

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

<强>的jQuery

<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>

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

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

1 个答案: