英文:
How to code the toggle script to only affect one part of the site?
问题
以下是您要翻译的内容：
In other words, I'd like the toggle code to work only on the part of the site where it's called. Currently, since there are classes involved, the script fires on all (similar) classes (when the .showAll is clicked all .newsTexCont get .openNewsText).
How to write the code without id's, and keep the way parts can be repeated with classes?
$('.showAll').click(function() {
$('.newsTextCont').toggleClass("openNewsText");
$(this).toggleClass('newsToggle');
});
.newsTitle {
align-self: stretch;
color: black;
font-size: 30px;
font-family: Lato;
font-weight: 700;
line-height: 38px;
word-wrap: break-word
}
.newsTextCont {
align-self: stretch;
height: 124px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex
}
.newsTextInner {
align-self: stretch;
height: 100px;
color: black;
font-size: 16px;
font-family: Lato;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
.newsTextInner::after {
content: "...";
position: absolute;
right: 0;
bottom: 4px;
}
.openNewsText .newsTextInner::after {
content: none;
}
.newsTextCont.openNewsText,
.openNewsText .newsTextInner {
height: auto;
}
.showAll {
cursor: pointer;
}
.showAll:hover {
text-decoration: none;
}
.showAll::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(0deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
.showAll.newsToggle::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(180deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll" id="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">© Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
</section>
请注意，我已经为您提供了翻译的代码和HTML部分，但我并未包括JavaScript和CSS的完整翻译，因为这两部分非常详细。如果您需要完整的翻译，请告诉我，我将继续提供翻译。
英文:
In other words, I'd like the toggle code to work only on the part of the site where it's called. Currently, since there are classes involved, the script fires on all (similar) classes (when the .showAll is clicked all .newsTexCont get .openNewsText).
How to write the code without id's, and keep the way parts can be repeated with classes?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.showAll').click(function() {
$('.newsTextCont').toggleClass("openNewsText");
$(this).toggleClass('newsToggle');
});
<!-- language: lang-css -->
.newsTitle {
align-self: stretch;
color: black;
font-size: 30px;
font-family: Lato;
font-weight: 700;
line-height: 38px;
word-wrap: break-word
}
.newsTextCont {
align-self: stretch;
height: 124px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex
}
.newsTextInner {
align-self: stretch;
height: 100px;
color: black;
font-size: 16px;
font-family: Lato;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
.newsTextInner::after {
content: "...";
position: absolute;
right: 0;
bottom: 4px;
}
.openNewsText .newsTextInner::after {
content: none;
}
.newsTextCont.openNewsText,
.openNewsText .newsTextInner {
height: auto;
}
.showAll {
cursor: pointer;
}
.showAll:hover {
text-decoration: none;
}
.showAll::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(0deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
.showAll.newsToggle::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(180deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll" id="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
</section>
<!-- end snippet -->
答案1
得分: 3
您正在选择DOM中的所有.newsTextCont元素并更新每个元素。
要解决这个问题，您需要遍历DOM以仅找到与被点击的.showAll按钮相关的元素。为此，使用this来获取对按钮的引用，以及closest()方法。
将这个代码段：
$('.newsTextCont').toggleClass("openNewsText");
更改为：
$(this).closest('.newsTextCont').toggleClass("openNewsText");
这里是一个可工作的示例：
<!-- 开始代码片段: js 隐藏: true 控制台: true babel: false -->
<!-- 语言: lang-js -->
$('.showAll').click(function() {
$(this).closest('.newsTextCont').toggleClass("openNewsText");
$(this).toggleClass('newsToggle');
});
<!-- 语言: lang-css -->
.newsTitle {
/* CSS 样式 */
}
/* 其他 CSS 样式 */
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
<!-- 其他 HTML 内容 -->
</section>
<!-- 结束代码片段 -->
这只返回您要翻译的部分，不包含其他内容。
英文:
You're selecting all the .newsTestCont elements in the DOM and updating each of them.
To fix the problem you need to traverse the DOM to find only the one related to the .showAll button which was clicked. To do that use this to get a reference to the button, along with the closest() method.
Change this:
$('.newsTextCont').toggleClass("openNewsText");
To this:
$(this).closest('.newsTextCont').toggleClass("openNewsText");
Here's a working example:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$('.showAll').click(function() {
$(this).closest('.newsTextCont').toggleClass("openNewsText");
$(this).toggleClass('newsToggle');
});
<!-- language: lang-css -->
.newsTitle {
align-self: stretch;
color: black;
font-size: 30px;
font-family: Lato;
font-weight: 700;
line-height: 38px;
word-wrap: break-word
}
.newsTextCont {
align-self: stretch;
height: 124px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex
}
.newsTextInner {
align-self: stretch;
height: 100px;
color: black;
font-size: 16px;
font-family: Lato;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
.newsTextInner::after {
content: "...";
position: absolute;
right: 0;
bottom: 4px;
}
.openNewsText .newsTextInner::after {
content: none;
}
.newsTextCont.openNewsText,
.openNewsText .newsTextInner {
height: auto;
}
.showAll {
cursor: pointer;
}
.showAll:hover {
text-decoration: none;
}
.showAll::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(0deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
.showAll.newsToggle::after {
content: "";
background: url(svg/footerChevron.svg);
transform: rotate(180deg);
transition: all 1s;
width: 12px;
height: 7px;
position: relative;
left: 7px;
bottom: 0px;
display: inline-block;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sec_pub">
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">TITLE</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll" id="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">The H4H program reached new milestones</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">The H4H program reached new milestones</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
<div class="innerWrap newsWrap">
<div class="newsCont">
<div class="newsLeftCont">
<div class="newsLeftContInner">
<div class="newsDate">28. September 2022.</div>
</div>
</div>
<div class="newsMiddleCont">
<div class="newsTitle">The H4H program reached new milestones</div>
<div class="newsTextCont">
<div class="newsTextInner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Odio tempor orci dapibus ultrices in iaculis. Aliquam sem fringilla ut
morbi. Est pellentesque elit ullamcorper dignissim cras tincidunt. Mauris ultrices eros in cursus turpis massa tincidunt dui ut. Tortor vitae purus faucibus ornare suspendisse sed nisi. Elit ut aliquam purus sit amet luctus. Feugiat pretium
nibh ipsum consequat nisl vel. Nulla aliquet enim tortor at auctor. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis. Egestas erat imperdiet sed euismod nisi porta. Tristique magna sit amet
purus gravida. Amet porttitor eget dolor morbi non arcu risus quis varius. Ornare lectus sit amet est placerat in egestas erat. Faucibus in ornare quam viverra orci sagittis eu. Consequat interdum varius sit amet mattis vulputate enim nulla.</div>
<div class="showAllCont">
<div class="showAll">Show all</div>
</div>
</div>
<div class="newsImgCont">
<img class="newsImg" src="https://via.placeholder.com/682x460" />
<div class="newsImgCredit">&copy; Aliquam ut porttitor leo</div>
</div>
</div>
</div>
</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论