26
4
I have a container with text that I want to show a read more/read less function that when clicked, displays or hides text. The problem is, I have about 10 of these containers on the same page and when I click a read more in one of the containers it affects every container on the page. I need the read more / read less function to only happen on the container where I click.
我有一个包含文本的容器，我想要显示一个多读/少读功能，当单击该功能时，将显示或隐藏文本。问题是，我在同一页面上有大约10个这样的容器，当我在其中一个容器中单击Read More时，它会影响页面上的每个容器。我需要Read More/Read Less功能只发生在我点击的容器上。
个人中心
文章发布
退出jQuery(document).ready(function($) {
var productDescription = $('.summary'),
productReadMore = $('.description-read-more'),
currentHeight = productDescription.height(),
autoHeight = productDescription.css('height', 'auto').height(),
showMoreText = 'Read More',
showLessText = 'Read Less';
productDescription.css('height', currentHeight);
productReadMore.click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
productDescription.removeClass('active');
productDescription.height(currentHeight).animate({
height: currentHeight
}, 0);
productReadMore.find('.text_more').html(showMoreText);
} else {
$(this).addClass('active');
productDescription.addClass('active');
productDescription.height(currentHeight).animate({
height: autoHeight
}, 0);
productReadMore.find('.text_more').html(showLessText);
}
});
});<div class="summary">
<p><strong>Description:</strong></p>
<p>initial content</p>
<p>more content</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
You're already a member for over 8y, by now you should be accustomed to code snippets. edit to create a minimal reproducible example.
你已经是会员超过8年了，现在你应该已经习惯于编写代码片段了。编辑以创建最小的可重现示例。
You use jQuery. Why do you use height (specially in this responsive era) when jQuery provides out of the box api.jquery.com/toggle
您可以使用jQuery。当jQuery提供开箱即用的api.jquery.com/切换时，为什么要使用高度(特别是在这个响应式时代
"Why doe this work on one when I want it to work on more than one" - usually involves in forEaching (jQuery's .each()) your set... or i.e: getting the height on that element's click.
“当我希望它在多个设备上工作时，为什么还要在一个设备上工作”--通常涉及forEach(jQuery‘s.each())您的set...或者，即：获取该元素点击的高度。
Also, why don't you wrap the button and the contents inside a common parent? That way you loop the parents only.
另外，为什么不把按钮和内容包装在一个共同的父级中呢？这样一来，您只需循环父级。
@RokoC.Buljan I set a height of 80px on .summary so some of the content shows. I don't want to hide all content and show all content like a toggle does.
@RokoC.Buljan我在.sum上设置了80px的高度，以便显示一些内容。我不想像切换按钮那样隐藏所有内容并显示所有内容。
One idea, without using JavaScript, would be to animate to auto height using CSS grid and use a checkbox (or radio) input for the toggling.
In this example I'm using the :has(), but to support Firefox (2023. ATM)
you can place the input in the parent wrapper and reference sibling elements using ~.
一个想法是，在不使用JavaScript的情况下，使用css网格将动画设置为自动高度，并使用复选框(或单选)输入进行切换。在本例中，我使用了：has()，但为了支持Firefox(2023)。ATM)，您可以将输入放在父包装器中，并使用~引用兄弟元素。
.additional-outer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s ease-in-out;
}
.additional-inner {
overflow: hidden;
}
.more {
display: inline-flex;
background: #0bf;
cursor: pointer;
padding: 0.5rem 1rem;
margin-top: 1rem;
}
.more::before {
content: "Read more";
}
.summary:has(input:checked) .more::before {
content: "Read less";
}
.summary:has(input:checked) .additional-outer {
grid-template-rows: 1fr;
}<div class="summary">
<h3>Some title</h3>
<div class="initial">
Initial. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt iste, ut vero voluptatem exercitationem dolorem minus facilis natus, officiis porro reiciendis aspernatur ex quae enim tenetur quia dicta veniam amet.
</div>
<div class="additional-outer">
<div class="additional-inner">
Additional. Repellendus accusantium doloremque et, iusto deserunt alias, cumque totam libero officiis voluptate sunt quisquam nam, consequuntur ipsa placeat nihil. Labore at, quaerat.
</div>
</div>
<label class="more"><input type="checkbox" hidden></label>
</div>
<div class="summary">
<h3>Some other description</h3>
<div class="initial">
Initial. Adipisicing elit. Placeat illum repudiandae repellat ex accusantium neque quibusdam pariatur aut dignissimos assumenda aliquam, ducimus asperiores consequuntur sint quaerat quia porro voluptatem. Facere!
</div>
<div class="additional-outer">
<div class="additional-inner">
Additional. Temporibus nisi ut dolorum corrupti officia unde similique, atque aliquid mollitia, rem dolores, dignissimos molestias qui enim, quae repellendus repellat asperiores consectetur..
</div>
</div>
<label class="more"><input type="checkbox" hidden></label>
</div>
Use event delegation. Add a listener to the document for which the handler only works if the event target (the element that was clicked on) has a read-more class.
使用事件委派。将侦听器添加到处理程序仅在事件目标(被单击的元素)具有Read-More类时才对其起作用的文档。
I would then group the section that needs to be displayed within the section that's triggering its opening/closing. From there grab the summary element of the clicked button using closest, find the section with the text-more class, and then toggle it.
然后，我会对需要在触发其打开/关闭的部分中显示的部分进行分组。从那里使用Cest获取所点击按钮的摘要元素，找到包含文本-More类的部分，然后切换它。
$(document).on('click', '.read-more', function () {
$(this)
// Find the closest summary element
.closest('.summary')
// Find its text-more element
.find('.text-more')
// Toggle its class
.toggle();
});.read-more { border: 0; }
.text-more { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="summary">
<p>Section 1</p>
<button class="read-more">Read More</button>
<section class="text-more">
<p>Section 1 more text</p>
</section>
</section>
<section class="summary">
<p>Section 2</p>
<button class="read-more">Read More</button>
<section class="text-more">
<p>Section 2 more text</p>
</section>
</section>
<section class="summary">
<p>Section 3</p>
<button class="read-more">Read More</button>
<section class="text-more">
<p>Section 3 more text</p>
</section>
</section>
If you don't want to group the markup together you can use data attributes to indicate which section should be toggled instead.
如果不想将标记组合在一起，可以使用数据属性来指示应该切换哪个部分。
$(document).on('click', '.read-more', function () {
// Find the id attached to the summary section
const id = $(this).closest('.summary').data('id');
// Use the id to create a selector that matches
// the text-more section with that id
const selector = `.text-more[data-id=${id}]`;
// Use the selector to find that elenent
const $text = $(document).find(selector);
// Toggle it
$text.toggle();
});.read-more { border: 0; }
.text-more { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="summary" data-id="1">
<p>Section 1</p>
<button class="read-more">Read More</button>
</section>
<section class="text-more" data-id="1">
<p>Section 1 more text</p>
</section>
<section class="summary" data-id="2">
<p>Section 2</p>
<button class="read-more">Read More</button>
</section>
<section class="text-more" data-id="2">
<p>Section 2 more text</p>
</section>
<section class="summary" data-id="3">
<p>Section 3</p>
<button class="read-more">Read More</button>
</section>
<section class="text-more" data-id="3">
<p>Section 3 more text</p>
</section>
In jQuery when you make a search of the kind of $(someselector) then all the items matching that selector apply. Hence, for example, productReadMore is defined as
在jQuery中，当您搜索$(某个选择器)的类型时，将应用与该选择器匹配的所有项。因此，例如，ductReadMore被定义为
productReadMore = $('.description-read-more')
and that applies for all elements having this class. Which is good when you call the .click() function, because it attaches a click event for all elements having this class. However, inside the function you need to differentiate and use $(this) rather than productReadMore to identify the item to change rather than change all items.
这适用于所有具有这个类的元素。这在调用.Click()函数时很好，因为它为具有此类的所有元素附加了一个Click事件。然而，在函数内部，您需要区分并使用$(This)而不是ductReadMore来标识要更改的项，而不是更改所有项。
jQuery(document).ready(function($) {
var productDescription = $('.summary'),
productReadMore = $('.description-read-more'),
currentHeight = productDescription.height(),
autoHeight = productDescription.css('height', 'auto').height(),
showMoreText = 'Read More',
showLessText = 'Read Less';
productDescription.css('height', currentHeight);
productReadMore.click(function() {
productDescription = $(this).prev();
currentHeight = productDescription.height();
autoHeight = productDescription.css('height', 'auto').height();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
productDescription.removeClass('active');
productDescription.height(currentHeight).animate({
height: currentHeight
}, 0);
$(this).find('.text_more').html(showMoreText);
} else {
$(this).addClass('active');
productDescription.addClass('active');
productDescription.height(currentHeight).animate({
height: autoHeight
}, 0);
$(this).find('.text_more').html(showLessText);
}
});
});<div class="summary">
<p><strong>Description:</strong></p>
<p>initial content</p>
<p>more content</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>
<div class="summary">
<p><strong>Description:</strong></p>
<p>initial content</p>
<p>more content</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Cheers @mplungjan. Much more succinct.
干杯@mpengjan。简明扼要得多。
26
4
0
我想了解 Ruby 方法 methods() 是如何工作的。 我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。 我也看过 ruby-doc.org，但我没有找到这种方法。
Test 方法 对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
Replace 方法 替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
Raise 方法 生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
Execute 方法 对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
Clear 方法 清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。 说明 在错误处理后，使用 Clear 显式地清除 Err 对象。此
CopyFile 方法 将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
Copy 方法 将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
Close 方法 关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。 说明 下面例子举例说明如何使用 Close 方
BuildPath 方法 向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
GetFolder 方法 返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
GetFileName 方法 返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
GetFile 方法 返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
GetExtensionName 方法 返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
GetDriveName 方法 返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
GetDrive 方法 返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
GetBaseName 方法 返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
GetAbsolutePathName 方法 从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
FolderExists 方法 如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
FileExists 方法 如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS
我是一名优秀的程序员,十分优秀！