首页猿问 JavaScript更改了不正确的...

JavaScript更改了不正确的元素，并且没有应用于所需的元素

JavaScript

四季花海 2022-09-02 21:16:28

我是新手，所以请原谅我缺乏理解。我一直在从CodePen编辑一支笔，但卡住了。我复制并修改了基本配置文件卡，使其具有两张卡。有JavaScript可以改变卡片上显示的内容。我无法弄清楚如何在复制的卡上使用JS功能。选择第二张卡片上的按钮时，它会更改第一张卡片的显示方式。我想知道为了实现这一目标，我需要在JS中更改什么。我在网上搜索了一下，但一直找不到解决方案。希望这里有人能够提供帮助。const buttons = document.querySelectorAll(".card-buttons button");const sections = document.querySelectorAll(".card-section");const card = document.querySelector(".card");const handleButtonClick = (e) => { const targetSection = e.target.getAttribute("data-section"); const section = document.querySelector(targetSection); targetSection !== "#about" ? card.classList.add("is-active") : card.classList.remove("is-active"); card.setAttribute("data-state", targetSection); sections.forEach((s) => s.classList.remove("is-active")); buttons.forEach((b) => b.classList.remove("is-active")); e.target.classList.add("is-active"); section.classList.add("is-active");};buttons.forEach((btn) => { btn.addEventListener("click", handleButtonClick);});var elements = document.getElementsByClassName("card"); for(var i = 0; i < elements.length; i++) { elements[i].onclick = function(){ // remove class from sibling var el = elements[0]; while(el) { if(el.tagName === "DIV"){ //remove class el.classList.remove("is-active"); } // pass to the new sibling el = el.nextSibling; } this.classList.add("is-active"); }; }

查看完整描述

1 回答

Qyouu

TA贡献1786条经验获得超11个赞

首先，您为卡片中的每个部分使用ID，并且它们是重复的，请记住，ID必须是唯一的。处理此问题的最简单方法是将ID移动到数据集，如下所示：

原文：

改为：<div class="card-section" id="about"><div class="card-section" data-id="about">

您只获得全局范围内的第一张卡，但您需要获取单击按钮所属的卡：const card = document.querySelector(".card");

// Find the card

const card = e.target.closest(".card");

现在，您可以通过存储在数据集中的ID来获取和搜索要激活的部分：targetSection

const targetSection = e.target.getAttribute("data-section");

// Then find the section by searching for dataset id atribute

const section = card.querySelector(`[data-id='${targetSection}']`);

从以下位置删除：#

JavascripttargetSection !== "#about"

CSS规则，经验和接触相同.card[data-state="#about"]

HTML按钮，用于体验和联系<button data-section="#about">ABOUT</button>

更新：要关闭“非活动”卡，删除类是不够的，因为您有'[data-state='some-value']的栅栏，因此，删除该值以使其工作。is-active

const buttons = document.querySelectorAll(".card-buttons button");

const sections = document.querySelectorAll(".card-section");

// Get all cards

const cards = document.querySelectorAll(".card");

const handleButtonClick = (e) => {

// First close all the cards

cards.forEach((c) => {

c.classList.remove('is-active');

c.dataset.state = '';

});

// I've moved these 2 lines here from below

sections.forEach((s) => s.classList.remove("is-active"));

buttons.forEach((b) => b.classList.remove("is-active"));

// Find the card

const card = e.target.closest(".card");

const targetSection = e.target.getAttribute("data-section");

// Then find the section

const section = card.querySelector(`[data-id='${targetSection}']`);

targetSection !== "about"

? card.classList.add("is-active")

: card.classList.remove("is-active");

card.setAttribute("data-state", targetSection);

e.target.classList.add("is-active");

section.classList.add("is-active");

};

buttons.forEach((btn) => {

btn.addEventListener("click", handleButtonClick);

});

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");

* {

box-sizing: border-box;

}

body {

color: #2b2c48;

font-family: "Jost", sans-serif;

background-image: url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80);

background-repeat: no-repeat;

background-size: cover;

background-position: center;

background-attachment: fixed;

min-height: 100vh;

display: flex;

flex-wrap: wrap;

padding: 20px;

}

.card {

min-width: 340px;

max-width: 340px;

margin: auto;

overflow-y: auto;

position: relative;

z-index: 1;

overflow-x: hidden;

background-color: rgba(255, 255, 255, 1);

display: flex;

transition: 0.3s;

flex-direction: column;

border-radius: 10px;

box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);

}

.card[data-state="about"] {

height: 550px;

.card-main {

padding-top: 0;

}

.card[data-state="contact"] {

height: 550px;

}

.card[data-state="experience"] {

height: 550px;

}

.card.is-active {

.card-header {

height: 80px;

}

.card-cover {

height: 100px;

top: -50px;

}

.card-avatar {

transform: none;

left: 20px;

width: 50px;

height: 50px;

bottom: 10px;

}

.card-fullname,

.card-jobtitle,

.card-jobtype {

left: 86px;

transform: none;

}

.card-fullname {

bottom: 18px;

font-size: 19px;

}

.card-jobtitle {

bottom: 16px;

letter-spacing: 1px;

font-size: 10px;

}

.card-jobtype {

bottom: 0px;

letter-spacing: 1px;

font-size: 10px;

}

.card-header {

position: relative;

display: flex;

height: 200px;

flex-shrink: 0;

width: 100%;

transition: 0.3s;

* {

transition: 0.3s;

}

.card-cover {

width: 100%;

height: 100%;

position: absolute;

height: 160px;

top: -20%;

left: 0;

will-change: top;

background-size: cover;

background-position: center;

filter: blur(30px);

transform: scale(1.2);

transition: 0.5s;

}

.card-avatar {

width: 100px;

height: 100px;

box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);

border-radius: 50%;

object-position: center;

object-fit: cover;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%) translateY(-64px);

}

.card-fullname {

position: absolute;

bottom: 0;

font-size: 22px;

font-weight: 700;

text-align: center;

white-space: nowrap;

transform: translateY(-10px) translateX(-50%);

left: 50%;

}

.card-jobtitle {

position: absolute;

bottom: 0;

font-size: 11px;

white-space: nowrap;

font-weight: 500;

opacity: 0.7;

text-transform: uppercase;

letter-spacing: 1.5px;

margin: 0;

left: 50%;

transform: translateX(-50%) translateY(-7px);

}

.card-jobtype {

position: absolute;

bottom: 0;

font-size: 11px;

white-space: nowrap;

font-weight: 500;

opacity: 0.7;

text-transform: uppercase;

letter-spacing: 1.5px;

margin: 0;

left: 50%;

transform: translateX(-50%) translateY(10px);

}

.card-main {

position: relative;

flex: 1;

display: flex;

padding-top: 10px;

flex-direction: column;

}

.card-subtitle {

font-weight: 700;

font-size: 13px;

margin-bottom: 8px;

}

.card-content {

padding: 20px;

text-align: justify;

}

.card-desc {

line-height: 1.6;

color: #636b6f;

font-size: 14px;

margin: 0;

font-weight: 400;

font-family: "DM Sans", sans-serif;

}

.card-social {

display: flex;

position: bottom;

align-items: center;

padding: 0 0px;

margin-bottom: 30px;

transform: translateX(25%) translateY(350%);

svg {

fill: rgb(165, 181, 206);

width: 16px;

display: block;

transition: 0.3s;

}

a {

color: #8797a1;

height: 32px;

width: 32px;

border-radius: 50%;

display: inline-flex;

align-items: center;

justify-content: center;

transition: 0.3s;

background-color: rgba(93, 133, 193, 0.05);

border-radius: 50%;

margin-right: 10px;

&:hover {

svg {

fill: darken(rgb(165, 181, 206), 20%);

}

&:last-child {

margin-right: 0;

}

.card-buttons {

display: flex;

background-color: #fff;

margin-top: auto;

position: sticky;

bottom: 0;

left: 0;

button {

flex: 1 1 auto;

user-select: none;

background: 0;

font-size: 13px;

border: 0;

padding: 15px 5px;

cursor: pointer;

color: #5c5c6d;

transition: 0.3s;

font-family: "Jost", sans-serif;

font-weight: 500;

outline: 0;

border-bottom: 3px solid transparent;

&.is-active,

&:hover {

color: #2b2c48;

border-bottom: 3px solid #8a84ff;

background: linear-gradient(

to bottom,

rgba(127, 199, 231, 0) 0%,

rgba(207, 204, 255, 0.2) 44%,

rgba(211, 226, 255, 0.4) 100%

);

}

.card-section {

display: none;

&.is-active {

display: block;

animation: fadeIn 0.6s both;

}

@keyframes fadeIn {

0% {

opacity: 0;

transform: translatey(40px);

}

100% {

opacity: 1;

}

.card-timeline {

margin-top: 30px;

position: relative;

&:after {

background: linear-gradient(

to top,

rgba(134, 214, 243, 0) 0%,

rgba(81, 106, 204, 1) 100%

);

content: "";

left: 42px;

width: 2px;

top: 0;

height: 100%;

position: absolute;

content: "";

}

.card-item {

position: relative;

padding-left: 60px;

padding-right: 20px;

padding-bottom: 30px;

z-index: 1;

&:last-child {

padding-bottom: 5px;

}

&:after {

content: attr(data-year);

width: 10px;

position: absolute;

top: 0;

left: 37px;

width: 8px;

height: 8px;

line-height: 0.6;

border: 2px solid #fff;

font-size: 11px;

text-indent: -35px;

border-radius: 50%;

color: rgba(#868686, 0.7);

background: linear-gradient(

to bottom,

lighten(#516acc, 20%) 0%,

#516acc 100%

);

}

.card-item-title {

font-weight: 500;

font-size: 14px;

margin-bottom: 5px;

}

.card-item-desc {

font-size: 13px;

color: #6f6f7b;

line-height: 1.5;

font-family: "DM Sans", sans-serif;

}

.card-contact-wrapper {

margin-top: 20px;

}

.card-contact {

display: flex;

align-items: center;

font-size: 13px;

color: #6f6f7b;

font-family: "DM Sans", sans-serif;

line-height: 1.6;

cursor: pointer;

& + & {

margin-top: 16px;

}

svg {

flex-shrink: 0;

width: 30px;

min-height: 34px;

margin-right: 12px;

transition: 0.3s;

padding-right: 12px;

border-right: 1px solid #dfe2ec;

}

.contact-me {

border: 0;

outline: none;

background: linear-gradient(

to right,

rgba(83, 200, 239, 0.8) 0%,

rgba(81, 106, 204, 0.8) 96%

);

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

color: #fff;

padding: 12px 16px;

width: 100%;

border-radius: 5px;

margin-top: 25px;

cursor: pointer;

font-size: 14px;

font-weight: 500;

font-family: "Jost", sans-serif;

transition: 0.3s;

}

[class^="grid-item"] {

color: #6f6f7b;

text-align: center;

background-color: none;

}

.grid {

margin: 0%;

display: grid;

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(3, 50px);

grid-gap: 5px;

position: relative;

background-color: none;

z-index: -2;

justify-content: center;

}

.grid-item1 {

display: flex;

background-color: none;

align-items: center;

justify-content: center;

text-transform: uppercase;

height: 45px;

width: 50px;

border-right: 1px solid #dfe2ec;

.i {

color: #dfe2ec;

}

.grid-item2 {

display: flex;

background-color: none;

align-items: center;

justify-content: left;

text-transform: uppercase;

height: 45px;

width: 240px;

}

<h1 class="card-fullname">#Project Manager</h1>

<h2 class="card-jobtitle">Leading Brand</h2>

<h2 class="card-jobtype">{CONTRACT}</h2>

</div>

<div class="card-subtitle">ABOUT</div>

<p class="card-desc">Do you have coding experience? Are you a technological professional? Do you strive to break through the barrier of technological limits? <br><br> Our client is looking for a dedicated <strong>#TechnicalProjectManager</strong>. Join a brand leading organisation.

</p>

<button class="contact-me">VIEW FULL ROLE OVERVIEW</button>

</div>

<p class="card-desc">As a Technical Project Manager, dealing with Management and teams involved on the project is essential. You must also have an ability to understand the Front, Back & Middleware layers of the entire project.</p>

<br>

<p class="card-desc">There is good communication and engagement between management and employees. They offer a positive and encouraging company culture. The team works hard, and the role is fast paced.</p>

<a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>

</div>

</div class="clear">

<div class="card-subtitle" style="align:center !important">SUBMIT YOUR CV</div>

<p class="card-contact">Upload your CV</p>

</div>

</div>

<p class="card-contact">submit your Cv via WHatsapp</p>

</div>

<p class="card-contact">drop us an email</p>

</div>

<a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>

</div>

<button data-section="about" ABOUT</button>

<button data-section="contact">APPLY</button>

</div>

<h1 class="card-fullname">#Project Manager</h1>

<h2 class="card-jobtitle">Leading Brand</h2>

<h2 class="card-jobtype">{CONTRACT}</h2>

</div>

<div class="card-subtitle">ABOUT</div>

</p>

<button class="contact-me">VIEW FULL ROLE OVERVIEW</button>

</div>

<br>

<a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>

</div>

</div class="clear">

<div class="card-subtitle" style="align:center !important">SUBMIT YOUR CV</div>

<p class="card-contact">Upload your CV</p>

</div>

</div>

<p class="card-contact">submit your Cv via WHatsapp</p>

</div>

<p class="card-contact">drop us an email</p>

</div>

<a href="#"><button class="contact-me">VIEW FULL ROLE OVERVIEW</button></a>

</div>

<button data-section="about">ABOUT</button>

<button data-section="contact">APPLY</button>

</div>

反对回复 2022-09-02

1 回答
0 关注
100 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

JavaScript更改了不正确的元素，并且没有应用于所需的元素

JavaScript更改了不正确的元素，并且没有应用于所需的元素

1 回答

添加回答