Question

这是我上一个问题的后续行动。如果您愿意，可以在此处找到之前的详细信息：How to dynamically get the dynamically created ID in a li

我为图片添加了<div>。我叫它<div class="main_pic">

以下是我目前的代码：

HTML：

<body>
<ol id="liste">
<li class="active"></li>
<li></li>
<li></li>   
</ol>
<div id="main_ima"></div>
<div id="main_pic"></div>
<script src="js/main.js"></script>
</body>

我试图用这样的东西预先添加图像：

$('#main_pic').prepend('<img id="theImg" src="https://domain/folders/to/pictures/" + (1+$(this).index()) + ".jpg" />');

或

$('#main_pic').prepend("<img id='theImg' src='https://domain/folders/to/pictures/' + (1+$(this).index()) + '.jpg' />");

或

$('#main_pic').prepend("<img id='theImg' src='https://domain/folders/to/pictures/0.jpg' />");

在上一个问题的评论中，我说我添加了一个新div，并希望从与所点击的li相关的文件中添加图像。

但是这些尝试（其他许多人）都产生了问题。第一个和第二个给我一个403，因为+ (1+$(this).index()) +之后的第二部分没有被看到而且第三次尝试不是动态的，而且，当我重新点击li时，它给了我第二张图片而没有删除第一

在上一个问题中，在评论中：trincot建议使用prev方法检查是否已有图像，但我未能在main.js文件中包含此内容。也许是因为我无法找出+ (1+$(this).index()) +部分？

以下是目前的情况：

main.js

$("#liste > li").on('click', apar);

function apar() {
$(this).addClass("active").siblings().removeClass("active");
$.getJSON('https://jsonplaceholder.typicode.com/posts/' + (1+$(this).index()), renderHTML);

$('#main_pic').prepend("<img id='theImg' src='https://domain/folders/to/pictures/' + (1+$(this).index()) + '.jpg' />");


$(document).ready(function(){
// Do something with the DOM
$('.active').click(function(){
$('.main_pic').attr('class', $(this.id)); 
});
});

我想我可以用CSS来解决这个问题，比如

.main_pic_1 {
background-image: url("https://domain/folders/to/pictures/0.jpg");   
}
.main_pic_2 {
background-image: url("https://domain/folders/to/pictures/1.jpg");   
}

等。

并添加一个与点击的li id相关的js的类。但这似乎不是最好的方法，并且会在CSS中创建大量的代码行。

有什么想法吗？

谢谢！非常感谢任何帮助。

编辑：有效的新链接是$('#main_pic').prepend("<img id='theImg' src='https://domain/folders/to/pictures/" + (1+$(this).index()) + ".jpg' />");，但每次点击时仍会显示多张图片。（图片保留在页面上，每次点击都会添加一张额外的图片。）但是，正在添加的是正确的图片。

解决方案： $('#main_pic').html("<img id='theImg' src='https://domain/folders/to/pictures/" + (1+$(this).index()) + ".jpg' />");

动态添加与点击的li

0 个答案: