button 相关问题

导入UIKit 导入谷歌地图导入 Firebase 数据库导入 GeoFire 类 MapViewController: UIViewController, CLLocationManagerDelegate, GMSMapViewDelegate { var 地图视图 = GMSMapView() ...

ios swift google-maps button gmsmapview

回答 2 投票 0

我无法添加带有 JSON 文件填充的按钮

我有一个 html 项目，需要使用数组添加 4 个从 JSON 文件填充的按钮。参数的获取取决于链接 ID。我有一个 html 项目，需要添加 4 个按钮，这些按钮是使用数组从 JSON 文件填充的。根据链接 ID 获取参数。 <div class="d-flex justify-content-around mt-4"> <a href="#" id="button-1" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-1"> Button 1 </a> <a href="#" id="button-2" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-2"> Button 2 </a> <a href="#" id="button-3" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-3"> Button 3 </a> <a href="#" id="button-4" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-4"> Button 4 </a> </div> </div> $(document).ready(function () { const urlParams = new URLSearchParams(window.location.search); const repoId = urlParams.get('id'); $.getJSON('repositories.json', function (data) { const repo = data.find(r => r.id === repoId); if (repo.buttons && Array.isArray(repo.buttons)) { repo.buttons.forEach((button, index) => { const btn = $(`#button-${index + 1}`); if (btn.length > 0) { btn.attr('href', button.link || '#'); btn.find('img').attr('src', button.icon || 'default-icon.png'); btn.find('span').text(button.text || `Button ${index + 1}`); } }); } }); </script> </body> </html> JSON 文件中的代码： [ { "id": "repo1", "buttons": [ { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl1" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl2" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl3" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl4" } ] }, { "id": "repo2", "buttons": [ { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl1" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl2" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl3" }, { "link": "exmpl.html", "icon": "exmpl.png", "text": "btn exmpl4" } ] } ] 我尝试将 repo.buttons 重命名为 repoId.buttons，但没有帮助（修复了控制台中的错误，但问题仍然存在）控制台错误：未捕获的引用错误：存储库未定义考虑以下内容：https://jsfiddle.net/Twisty/vax2e167/ HTML <div> <div class="d-flex justify-content-around mt-4"> <a href="#" id="button-1" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-1" /> <span>Button 1</span> </a> <a href="#" id="button-2" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-2" /> <span>Button 2</span> </a> <a href="#" id="button-3" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-3" /> <span>Button 3</span> </a> <a href="#" id="button-4" class="btn btn-primary"> <img src="" alt="Icon" id="icon-button-4" /> <span>Button 4</span> </a> </div> </div> JavaScript var myData = '[{"id":"repo1","buttons":[{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl1"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl2"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl3"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl4"}]},{"id":"repo2","buttons":[{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl1"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl2"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl3"},{"link":"exmpl.html","icon":"exmpl.png","text":"btn exmpl4"}]}]' $(function () { //var urlParams = new URLSearchParams(window.location.search); //var repoId = urlParams.get("id") var repoId = "repo2" $.post("/echo/json/", { json: myData }, function (data) { var repo = data.find((r) => r.id === repoId) if (repo.buttons && Array.isArray(repo.buttons)) { repo.buttons.forEach((button, index) => { var btn = $("#button-" + (index + 1)) if (btn.length > 0) { btn.attr("href", button.link || "#") btn.find("img").attr("src", button.icon || "default-icon.png") btn.find("span").text(button.text || `Button ${index + 1}`) } }) } }) }) 在此示例中，必须将 <span> 标签添加到 HTML 中才能使您的脚本正常工作。 JSFiddle 是测试模拟 JSON 的好方法，因为它具有 Echo 功能。

javascript html jquery arrays button

回答 1 投票 0

使用滚动对齐对齐到达第一个/最后一个元素时，下一个/上一个按钮不会隐藏

我正在尝试制作显示 3 个项目的轮播，其宽度缩放为其父项的 100%/3。下一个上一个按钮工作正常，并且显示隐藏功能工作良好，只要它们到达边缘...

javascript button carousel scroll-snap

回答 1 投票 0

button 相关问题

最新问题