- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试学习 js (和一点 jquery),当我试图找到一种方法来组合我找到的解决方案时,我遇到了两个困难。
请注意,此代码是我最近完成的一些教程的混合体。我对 js 很陌生。
所以我从一个带有几个 li 的基本 html 开始。
<body>
<ol id="liste">
<li class="active">
</li>
<li>
</li>
<li>
</li>
</ol>
<div id="main_ima">
</div>
<script src="js/main.js"></script>
</body>
我想为每个“li”创建 id,因此在我的 main.js 中添加以下内容:
var idVar = $("#liste").find("li").each(function(index){
$(this).attr("id","num-li-"+index);
});
到目前为止效果很好。每次我添加一个新的 li 时,它都会获得一个新的 id。我还将它放入 var 中,因为稍后需要使用它。
在控制台中,如果我输入 idVar,它会给我 li 的整个列表。如果我输入 idVar[3]。它只给我与 [3] 相关的 li。完美。
现在我想在单击其中一个 li 时显示一些内容。例如,我将使用[3]。所以我将其添加到我的 main.js
var imaContainer = document.getElementById('main_ima')
var listed = document.getElementById('liste');
idVar[3].addEventListener("click", appar);
function appar(){
$(idVar[3]).addClass("active").siblings().removeClass("active");
var imaSel = new XMLHttpRequest();
imaSel.open('GET', 'https://domain.link.to.file.json');
imaSel.onload = function() {
var imaLo = JSON.parse(imaSel.responseText);
renderHTML(imaLo);
};
imaSel.send();
};
function renderHTML(data) {
var htmlS = "";
for (i = 0; i < data.length; i++) {
htmlS += "<p>" + data[i].name + " is a " + data[i].species + ".</p>";
}
imaContainer.insertAdjacentHTML('beforeend', htmlS);
}
顺便说一句,我为 CSS 添加/删除“active”类。
因此,当我单击 li[3] 时,它几乎按预期工作。唯一的事情是,当我重新单击 [3] 时,它会第二次产生结果。再说一遍,如果我第三次单击它,它会第三次生成结果,而不会删除过去的结果。 (这不完全是我想要的。只有第一个结果会更好。)
但这不是我面临的主要问题。
我希望根据单击的 li 的 id 动态检测 [number]。我可以以一种非常丑陋的方式为我拥有的每个[数字]复制并粘贴这段代码。它会起作用的。但是,如果我想添加更多 li 元素,我需要添加更多上述代码的复制和粘贴,这可能会给我带来巨大的文件。这肯定不是最好的方法,尽管它会起作用。
我确信这可以动态完成..但这就是我在这里的主要原因。 :)
之后,一旦将动态添加到单击的 li 中,我还希望根据 li id 动态更改链接。例如,代替:
imaSel.open('GET', 'https://domain.link.to.file.json');
类似于:
imaSel.open('GET', "https://domain.link.to.file" + var +".json");
var 等于点击的 li 的 [3] 号。
在这种情况下,当我尝试使用 for 循环添加 var 时,我总是得到“var = max.length”而不是“var = [单击项目的 id]”。
所以你已经得到它了。您需要更多详细信息吗?
这是我第一次尝试 JS 和/或 Jquery。我已经玩了几天了,但是当我寻找答案时,当我实现“解决方案”时,它总是给我带来一些新问题。因此,我向您展示了最接近我正在寻找的代码(IMO)。
希望我离一些可行的东西并没有太远,而且不像我的解决方案那么大。 :)
感谢您的宝贵时间,感谢所有帮助。
最佳答案
以下是一些建议:
您无需将 id
属性分配给 li
。实际上你永远不需要那个id
。这也同样有效(另请注意选择器中的 >
,这使得 find
调用变得不必要):
var $li = $("#liste > li");
现在您已经可以将每个 li
寻址为 $li[3]
,尽管这不是“最佳实践”。更好的是 $li.get(3)
。我还喜欢当变量是 jQuery 选择的结果时以 $
开头的约定。它提供了一个线索,表明您可以对其应用 jQuery 方法。
您无需分别为每个 li
分配点击处理程序。使用 jQuery on
(而不是 native addEventListener
),您可以一次为所有这些事件分配一个事件处理程序。
$li.on('click', apar)
您为 on
定义的回调会将 this
设置为已单击的特定 li
元素,因此您可以做:
$(this).addClass("active").siblings().removeClass("active");
...没有任何数组查找。
jQuery 为多种类型的 HTTP 请求提供了简单的函数,因此您无需使用 XMLHttpRequest
。事实上,有一个专门用于获取 JSON,因此您甚至不必解析响应:
$.getJSON('https://domain.link.to.file.json', renderHTML);
jQuery index()
方法可以为您提供该 li
的序列号:
$.getJSON('https://domain.link.to.file' + $(this).index() + '.json', renderHTML);
要替换某个元素的内部 HTML,可以使用 jQuery html
方法:
$('#main_ima').html(htmlS);
另请注意,您不需要 DOM 原生 getElementById
方法,jQuery 可以使用简短的 $('#main_ima')
为您查找该方法。
这是一个使用假 JSON 服务服务器的工作示例:
$("#liste > li").on('click', apar);
function apar() {
$(this).addClass("active").siblings().removeClass("active");
$.getJSON('https://jsonplaceholder.typicode.com/posts/'
+ (1+$(this).index()), renderHTML);
}
function renderHTML(data) {
// This particular JSON request returns an object with body property
var htmlS = data.body;
$('#main_ima').html(htmlS);
}
// On page load, click on the first `li` to automatically load the data for it
$('#liste > li:first').click();
#liste { width: 40px }
.active { background: yellow }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="liste">
<li class="active">load 1</li>
<li>load 2</li>
<li>load 3</li>
</ol>
<div id="main_ima"></div>
关于javascript - 如何动态获取li中动态创建的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45803627/
好吧,标题说明了一切。我的 javascript 函数构建一些“ block ”并使用 和 创建它们。问题是,它删除了所有其他 在网页上。 编辑:(好吧,我假设这个函数是造成这个的原因。删除我的意思是
这个 HTML 结构有效吗? Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
我正在尝试在 UL 中添加标题因为你不能在 UL 中使用 H2如果按照我展示的方式使用它可以吗? News roll News 1 News 2 我的一位 friend 告诉我
这是我的 代码风格。 li{ font-family: Arial, sans-serif; font-size: 100%; color: black; display : list-item;
我正在使用 a 进行水平导航,感谢问题:Separators For Navigation ,我读到了使用 li + li 设置基于图像的元素分隔符的好方法。 (伪?)选择器。 在我的代码中,我为
我有一个 Div 容器,其中包含 4 我正在做的是在前面加上 进入并删除最后一个 我很容易使用 $('#news-ul li:last').remove() $('#news-ul').prepe
这是 html: menu item menu item menu item menu item menu item 如果我按“a”链接,它会将“当
我有 ul-li 列表 1 2 3 A B 我可以在列表中使用纯 css 最后一个选择器“.digit”吗? .digit 的数量未知 ul li.digit:nth-last-ch
我有这种情况,1- 我想删除一个带有两个图标的 li,它作为一个跨度在里面:一个是选中或取消选中相应的 li,另一个是删除那个 li。2- 我还想通过单击图标(选中图标)同时单击 li 来选中或取消选
如果标题不好理解,我来解释一下... 我有一个 css/jquery 切换菜单。按“+”号时它变大,按“-”号时它变小。我使几个元素的填充、边距和高度在切换/单击时发生变化。菜单顶部充满了链接,然后当
我有一个脚本 ( JsFiddle here ) 检测 li block 元素何时在页面上垂直居中并为其分配一个 .centered 类以使其更大通过 CSS。 .centered { hei
代码在这里:http://jsfiddle.net/C5mTf/49/我不知道为什么。下面的代码有问题吗? $("#menu").on('click','li',function (){ va
我为这个问题苦苦挣扎了几个小时,但仍然无法解决问题。 我有这样的 html 代码: aaaa11 bbbb11 我想知道如何使用 css 让 每里一行显示。但是 标签仍然具有垂
我需要使用水平缩放的 ul > li > ul 的组合来创建一个菜单。每个 ul 都应该有一个 max-height 并在溢出时滚动。悬停在 li 上时,如果里面有另一个 ul 标签,它应该会在右侧打
我了解到,如果我指的是 在 内或 在 CSS 中我应该使用 ol > li或 ul > li但是一旦我忘记在 ol 和 li 之间放置标志,我发现它仍然有效。执行此操作的正确方法是什么? 最佳答案
Question 1 Answer: $('#addquestion').click(function() { var $question_number
我如何在 中显示我的数组值? 我的代码: HTML JS var myList = [ ['1','one'], ['1','two'], ['1','th
我在使用代码编辑器时遇到了问题所以就在这里 Item1 Item 1.1 Item 1.2 Item2
我正在为我的网站创建响应式移动版本。正如您在此 jsfiddle 中看到的那样, 当用户将鼠标悬停在 上时项,菜单打开但覆盖了 而不是展开菜单。 我已经添加了 display: block在不同的地
我正在尝试创建一个网站,但我偶然发现了一个小问题,我正在使用 bootsnipp(一个侧面菜单)中的一个片段,我无法让它工作,所以链接将覆盖整个 LI,而不是你必须按自己的文字如果我改变它,那么它会坐
我是一名优秀的程序员,十分优秀!