锚点在第二个索引后什么都不做
[英]anchor do nothing after second index
问题描述
我有一个 django-qcm，其中的部分在单击锚点和使用 scroll snap type 属性时会发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: #72a9d6;
color: white;
font-family: "Mont", sans-serif;
overflow: hidden;
}
section{
overflow: hidden;
height: 100vh;
/*overflow-y: scroll;*/
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.container{
padding: 5%;
display: grid;
position: relative;
justify-items: center;
gap: 3px;
scroll-snap-align: center;
height: 100%;
}
.question_title{
height: 50px;
font-size: 25px;
font-weight: 500;
text-align: center;
}
.space_title{
height: 150px;
}
.container_reps{
max-width: 30%;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-count:2;
height: 20%;
}
.rep{
display: flex;
align-items: center;
border:1px solid white;
padding: 0 5px ;
max-width: 15%;
min-width: 250px;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 10px;
max-height: 40px;
}
.rep:hover{
background-color: rgba(255, 255, 255, 0.3);
}
.dot_rep{
background-color: #63c7f5;
border: 1px solid white;
color: white;
margin-right: 7px;
padding: 5px 10px;
border-radius: 5px;
}
.text_rep{
font-weight: 700;
}
.check{
margin-left: 40%;
}
</style>
<section>
<div id="1" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 1</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="2" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 2</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="3" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 3</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="4" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 4</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function scrollToAnchor(ind){
const aTag = $("#"+ind);
$('body,section').animate({scrollTop: aTag.offset().top},'slow');
}
//scrollToAnchor('2');
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps,function(rep){
$(rep).click(function(){
if(! rep.querySelector('.check')){
[].forEach.call(reps,function(repToDel){
if(repToDel.querySelector('.check')){
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
let x = parseInt($(rep).closest('.container').attr('id'))
//var y = x.toString()
console.log(x)
scrollToAnchor(x+1)
}
})
})
</script>
</body>
</html>
第一个锚点工作正常，但在第二个锚点之后没有任何反应。 function scrollToAnchor(3) 在控制台中调用时工作正常。 我尝试更改不同的 dom 参数以到达容器 id 以及 int 和 str 但除了错误之外没有任何变化。
3 个解决方案
解决方案1
1 2023-01-15 20:22:20
问题似乎是您正在获取.container id，而您可能会使用被点击的.rep的编号。
尝试这样的事情：
let x = parseInt($(rep).index()) + 1
解决方案2
0 2023-01-17 07:30:48
我用这段代码修复了它：
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
$(rep).click(function() {
if (!rep.querySelector('.check')) {
[].forEach.call(reps, function(repToDel) {
if (repToDel.querySelector('.check')) {
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
var x = parseInt($(rep).closest('.container').attr('id'));
document.getElementById((++x).toString()).scrollIntoView({
behavior: 'smooth'
});
解决方案3
0 2023-01-17 10:32:57
您需要清理您的 JS，在下面的链接中您可以找到具有相同需求的 js 和 css 的解决方案，instagram stroies 克隆组件。 检查本教程的整个解决方案，编码良好。
我的锚点onclick显示了图像，但是在一秒钟后消失了，为什么？
[英]My anchor onclick shows the image but disappears after a second, WHY?
在Angular 2+中更改带有锚点的html元素后，如何设置@ViewChild（'anchor_name'）？
[英]How do I set @ViewChild('anchor_name') after html element with anchor changed in Angular 2+?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.