javascript - aria-hidden 弹出窗口的 Javascript 问题
问题描述
我有这个 ajax 代码,它res.json(event)
从服务器获取一个,然后根据收到的值创建一个对象。
这是该代码的一部分:
html += `<div class="card-header" id="headingOne-${i}">` +
`<div class="event-time"><time class="published" datetime="2017-03-24T18:18">${data[i].events.targetReminder} | ${data[i].events.targetAmPM}</time><div class="more"> <svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use> </svg><ul class="more-dropdown"><li><a href="#" onClick="reply_click()" id ="mark-${i}">Mark as Completed</a></li> <li><a href="#" id ="delet-${i}">Delete Event</a> </li></ul></div></div>` +
`<h5 class="mb-0 title"><a href="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >${data[i].events.title}<i class="fa fa-angle-down" aria-hidden="true"></i>` +
` <span class="event-status-icon" data-toggle="modal" data-target="#public-event"><svg class="olymp-calendar-icon" data-toggle="tooltip" data-placement="top" id ="uncomplet-${i}"data-original-title="UNCOMPLETED"><use xlink:href="svg-icons/sprites/icons.svg#olymp-calendar-icon"></use></svg></span></a></h5></div>` +
`<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#headingOne-${i}"><div class="card-body" id="${data[i].events._id}" onClick="reply_click()">${data[i].events.caption}</div><div class="place inline-items"><svg class="olymp-add-a-place-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-add-a-place-icon"></use></svg><span>${data[i].events.location}</span></div></div></div>`;
这是代码的输出:
我说的隐藏的咏叹调就是这个
<div class="modal fade" id="public-event" tabindex="-1" role="dialog" aria-labelledby="public-event" aria-hidden="true">
我已经尝试过并且已经知道这不是一个合适的解决方案在这里
代码测试
我创建了一个更改的脚本,aria-hidden => true or false
但我不知道如何将它与我的盒子链接
<script type="text/javascript">
function reply_click()
{
document.getElementById('public-event').setAttribute('aria-hidden', 'false');
}
</script>
另一个失败的尝试:
<script type="text/javascript">
function reply_click()
{
alert('this function is called')
$(`#mark-${i}`).onclick = function() {
document.getElementById('public-event').setAttribute('aria-hidden', 'false');
};
}
</script>
我还在 HTML 中添加了这个函数onClick="reply_click()"
,但什么也没发生。我只得到alert('this function is called')
请给我一个想法好吗?
解决方案
这可能是你的问题吗?您使用 javascript 动态创建一个项目,但您要选择的项目,点击事件,当时并没有实际创建。创建要导出的项目后,您可以选择它并进行所需的更改。
更新:我添加了我的意思的片段。为了让我选择点击按钮后发生的 H1 标签,我必须编写一个在它发生后会发生的函数。
const button = document.querySelector(".clickme");
const container = document.querySelector(".container");
button.addEventListener("click", () => {
container.innerHTML += `
<h1 class = "change-modal"> ı cant select this</h1>
<div class="modal fade" id="public-event" tabindex="-1" role="dialog" aria-labelledby="public-event"
aria-hidden="true"> `
})
const changeModal = document.querySelector(".change-modal")
console.log(changeModal)
<button class="clickme">Click me</button>
<div class="container" style="background-color: red;">
</div>
<h1 class="change-modal">ı select this</h1>
更新2:
for (let i = 0; i < data.length; i++) {
html += // your html
$("eventCard").append(html);
//after this, you can select the item and type the function because the items are created here.
}
更新了3!!!: 我解释了如何在不使用 jquery 的情况下使用 javascript 做事。希望你明白我的意思。
async getData() { // fetch operations using javascript
const data = await fetch(url); // your api url
const jsonToData = await data.json(); // here you can Request api and obtain the data
return jsonToData;
}
getData().then((data) => {
console.log(data) // ıts probably an array.
for (let data = 0; data < jsonToData.length; data++) {
// data operations, what if you want to
html += // you printed document items,
}
})
.then(() => {
//!!! IMPORTANT!!! this is where you need to perform the operation of selecting the element function. you can also write a function that can work for the code here, but I've written it one by one for now.
const clickedElement = //type whatever element you want to click on. !!
clickedElement.addEventListener("click", function() {
const elementToChange = document.getElementById(".public-event");
elementToChange.setAttribute('aria-hidden', 'false');
})
})
.catch(err => console.log(err))
推荐阅读
- ruby-on-rails - Capistrano deploy 命令后没有任何反应
- javascript - 在 javascript 中创建一个可以从 jQuery UI 拖放的对象
- python - 显示 MessageBox 时出现 Python New TKinter 窗口
- go - 如何从杜松子酒的前端获取数据?
- c# - 制作一个弹出面板,询问我是否确定要在 Unity 中购买特定商品
- string - Python 3:读取列表格式的文本文件
- javascript - 如何在 Sweetalert 中使用文件处理程序?
- python - Scrapy使文本超出范围
- java - 如何在 java 对象上应用相同的行为?
- git - 通过 MakeFile 和 Tar 球创建 RPM