JavaScript-一组js逻辑有效,而另一组则无效
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-一组js逻辑有效,而另一组则无效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9728字，纯文字阅读大概需要14分钟。
内容图文
PS：非常感谢任何人为此添加一个更好的标题,我真的想不到其他任何东西
所以从本质上讲,我有这个列表逻辑：https://jsfiddle.net/ydtndwrv/10/,简而言之,每个项目都与描述和图像链接在一起.
我想像这样将其中两个放在页面上：https://jsfiddle.net/6g3x149n/1/
// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var siblings = this.parentNode.childNodes
siblings.forEach(function(element) {
if (element.className && element.className.indexOf('active') !== -1) {
element.classList.remove("active");
}
})
this.className += " active";
});
}
// -----------------END OF STYLING ELEMENT-----------------
// -----------------START OF LOGIC ELEMENT-----------------
const desc_area = document.getElementById('description');
const image = document.querySelector('img');
const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, {
desc: 'some description for item1',
img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
desc: 'some description item2',
img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
desc: 'some item3',
img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
desc: ' description for item4',
img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});
map.set(item5, {
desc: 'This item5 is cool',
img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
desc: 'item6 displays attitude',
img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
desc: 'amazing item7 just breathtaking',
img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
desc: ' item8 is an interesting conept',
img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});
// you can bind on click handler for example
const list = document.querySelector('ol');
list.addEventListener('click', event => {
// if element that was registered in our map triggered the event
if (map.has(event.target)) {
// change text of description area
desc_area.textContent = map.get(event.target).desc;
// change src of the image
image.src = map.get(event.target).img;
}
});
// -----------------END OF LOGIC ELEMENT-----------------body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* containers */
#content-working {
margin: 20px;
}
* {
font-family: Corbel;
}
#wrapper {
border: 1px solid red;
padding: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
}
#image,
#description,
#list {
border: 1px solid #472836;
box-sizing: border-box;
margin: 5px;
}
/* list */
#list {
width: 150px;
height: 250px;
background-color: #9AD2CB;
overflow-y: auto;
overflow-x: hidden;
}
#list ol {
list-style: none;
padding: 0;
margin: 0;
}
#list li {
padding: 5px;
transition: all .3s ease;
}
#list li:nth-child(even) {
background-color: #91f2e6;
width: 100%;
height: 100%;
}
#list li:hover,
#list .active {
cursor: pointer;
color: red;
padding-left: 25px;
}
/* sub-container */
#image,
#description {
width: 150px;
height: 150px;
}
#image {
background-color: #D7EBBA;
}
#image img {
width: 100%;
height: 100%;
}
#description {
background-color: #FEFFBE;
overflow-y: auto;
overflow-x: hidden;
height: 95px;
}<div id="content-working">
<div id="wrapper">
<div id="list">
<ol>
<li id="item1" class="item">items1</li>
<li id="item2" class="item">items2</li>
<li id="item3" class="item">items3</li>
<li id="item4" class="item">items4</li>
</ol>
</div>
<div id="image-container">
<div id="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div id="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
<div id="wrapper">
<div id="list">
<ol>
<li id="item5" class="item">items5</li>
<li id="item6" class="item">items6</li>
<li id="item7" class="item">items7</li>
<li id="item8" class="item">items8</li>
</ol>
</div>
<div id="image-container">
<div id="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div id="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
</div>问题是我似乎无法获得第二个列表,但是我已经非常接近问题了.
最初的问题是我在js中使用了相同的描述和img,因此第二个问题是了解现在哪个去哪里.
I have tried to add the second description:
06003
..but then when I choose an item in the first list, then it
does change that said description content yet no effect with with the other list.
我不太精通JS,因此无法真正找到解决方案.
解决方法:
我进行了以下修改：
>将id更改为在CSS和HTML中都可以分类,因为id必须是唯一的
>在适用时使用正确的多个选择器.querySelectorAll,.getElementsByClassName和.forEach.
>删除了变量const desc_area和const image,改为在.forEach中使用一些代码.
这是一个片段,其中多个元素都很可爱：
(有关JS修改的更多详细信息,请参阅我的代码中的注释,以及一些建议！)
// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var siblings = this.parentNode.childNodes
siblings.forEach(function(element) {
if (element.className){ // && element.className.indexOf('active') !== -1) { // TAKIT: Removed, see suggestion below
if (element.classList.contains('active')) // TAKIT: Suggestion: Easier, and better readability!
element.classList.remove("active");
}
})
this.classList.add("active"); // TAKIT: Suggestion instead of this.className += " active";
});
}
// -----------------END OF STYLING ELEMENT-----------------
// -----------------START OF LOGIC ELEMENT-----------------
const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, {
desc: 'some description for item1',
img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
desc: 'some description item2',
img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
desc: 'some item3',
img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
desc: ' description for item4',
img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});
map.set(item5, {
desc: 'This item5 is cool',
img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
desc: 'item6 displays attitude',
img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
desc: 'amazing item7 just breathtaking',
img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
desc: ' item8 is an interesting conept',
img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});
// you can bind on click handler for example
const list = document.querySelectorAll('ol'); // TAKIT: Modified to return multiple elements
list.forEach(function() { // TAKIT: Added to manage the multiple elements
this.addEventListener('click', event => {
// if element that was registered in our map triggered the event
if (map.has(event.target)) {
var wrapper = event.target.closest('.wrapper'); // TAKIT: Get parent wrapper
// change text of description area
wrapper.querySelector('.description').textContent = map.get(event.target).desc; // TAKIT: Modified
// change src of the image
wrapper.querySelector('img').src = map.get(event.target).img; // TAKIT: Modified
}
});
});
// -----------------END OF LOGIC ELEMENT-----------------body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* containers */
#content-working {
margin: 20px;
}
* {
font-family: Corbel;
}
.wrapper {
border: 1px solid red;
padding: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.image,
.description,
.list {
border: 1px solid #472836;
box-sizing: border-box;
margin: 5px;
}
/* list */
.list {
width: 150px;
height: 250px;
background-color: #9AD2CB;
overflow-y: auto;
overflow-x: hidden;
}
.list ol {
list-style: none;
padding: 0;
margin: 0;
}
.list li {
padding: 5px;
transition: all .3s ease;
}
.list li:nth-child(even) {
background-color: #91f2e6;
width: 100%;
height: 100%;
}
.list li:hover,
.list .active {
cursor: pointer;
color: red;
padding-left: 25px;
}
/* sub-container */
.image,
.description {
width: 150px;
height: 150px;
}
.image {
background-color: #D7EBBA;
}
.image img {
width: 100%;
height: 100%;
}
.description {
background-color: #FEFFBE;
overflow-y: auto;
overflow-x: hidden;
height: 95px;
}<div id="content-working">
<div class="wrapper">
<div class="list">
<ol>
<li id="item1" class="item">items1</li>
<li id="item2" class="item">items2</li>
<li id="item3" class="item">items3</li>
<li id="item4" class="item">items4</li>
</ol>
</div>
<div class="image-container">
<div class="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div class="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
<div class="wrapper">
<div class="list">
<ol>
<li id="item5" class="item">items5</li>
<li id="item6" class="item">items6</li>
<li id="item7" class="item">items7</li>
<li id="item8" class="item">items8</li>
</ol>
</div>
<div class="image-container">
<div class="image">
<img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
</div>
<div class="description">
just a placeholder text for when nothing has been chosen.
</div>
</div>
</div>
</div>希望能帮助到你！
内容总结
以上是互联网集市为您收集整理的JavaScript-一组js逻辑有效,而另一组则无效全部内容，希望文章能够帮你解决JavaScript-一组js逻辑有效,而另一组则无效所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】