如何在不使用按钮的情况下单击时更改 label 的文本？
[英]How to change the text of a label when clicked without using buttons?
问题描述
I have a table with collapsible cells that I'd like to change the text of when expanded.
我有一个带有可折叠单元格的表格，我想在展开时更改其文本。 Specifically, when the cells are collapsed, a plus sign exists next to the cell text (so as to signal to the user that there is more to see), and the text "(Click to expand...)" is shown.具体来说，当单元格折叠时，单元格文本旁边会出现一个加号（以便向用户发出信号，表明还有更多内容可以查看），并显示文本“（单击以展开...）”。 I would like, however, to replace the plus sign with a minus sign when the label is clicked, and to erase the "(Click to expand...)" text.但是，我想在单击 label 时用减号替换加号，并删除“（单击以展开...）”文本。
The issue I am facing is that the minus sign icon and plus sign icon appear together and disappear together, rather than the minus sign replacing the plus sign and vice versa.我面临的问题是减号图标和加号图标一起出现和消失，而不是减号代替加号，反之亦然。 How would I go about making them replace each other with every collapse/expand?我 go 如何让它们在每次折叠/展开时相互替换？
Below is a working example of a simplified version of my code:下面是我的代码简化版本的工作示例：
$(document).ready(function() { $('.hide').hide(); $('[data-toggle="toggle"]').change(function() { $("label[for='" + this.id + "'] i.fa-plus-circle").toggle(); $("label[for='" + this.id + "'] i.fa-minus-circle").toggle(); $("label[for='" + this.id + "'] span").toggle(); $(this).parents().next('.hide').toggle(); }); });
[data-toggle="toggle"] { display: none; }.label { display: block; }.fa-minus-circle { display: none; } table, tr, th, td { border: 1px solid black; border-collapse: collapse; font-family: Arial; width: 100%; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <table> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="person"> <i class="fa fa-plus-circle"></i> <i class="fa fa-minus-circle"></i> <b>Person</b> <span class="clicktoexpand">(Click to expand...)</span> </label> <input type="checkbox" id="person" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="people">Jack</td> <td class="right cell" id="jack"> <span>0</span> </td> </tr> <tr> <td class="people">Jill</td> <td class="right cell" id="jill"> <span>0</span> </td> </tr> </tbody> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="place"> <i class="fa fa-plus-circle"></i> <i class="fa fa-minus-circle"></i> <b>Place</b> <span class="clicktoexpand">(Click to expand...)</span> </label> <input type="checkbox" id="place" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="city">LA</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> <tr> <td class="city">NYC</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> </tbody> </table>
3 个解决方案
解决方案1
1 2020-08-03 02:09:29
This does almost what you asked for:这几乎可以满足您的要求：
if($(this).parents().next('.hide').is(':visible'))
$(this).prev("label").text("-")
else
$(this).prev("label").text("(Click to expand...)")
It selects the label sibling that holds the text that you want to modify and checks if the element that you hid is visible or not, then changes the text inside.它选择包含您要修改的文本的 label 同级元素，并检查您隐藏的元素是否可见，然后更改其中的文本。 because "Person" and "Place" are a part of the labels' text they're being overwritten.因为“Person”和“Place”是标签文本的一部分，所以它们被覆盖了。 this can be solved by multiple ways, ones of which is nesting the text to be changed in another html tag and instead of changing the labels' text changing that tag's text content aka wrapping it with a <span></span> .这可以通过多种方式解决，其中一种方式是将要更改的文本嵌套在另一个 html 标签中，而不是更改标签的文本来更改该标签的文本内容，也就是用<span></span>包装它。 see:看：
$(document).ready(function() { $('.hide').hide(); $('[data-toggle="toggle"]').change(function() { $(this).parents().next('.hide').toggle(); if($(this).parents().next('.hide').is(':visible')) $(this).prev("label").find("span").text("-") else $(this).prev("label").find("span").text("(Click to expand...)") }); });
[data-toggle="toggle"] { display: none; }.label { display: block; } table, tr, th, td { border: 1px solid black; border-collapse: collapse; font-family: Arial; width: 100%; }
<table> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="person"> <i class="fa fa-plus-circle"></i> <b>Person</b> <span>(Click to expand...)</span> </label> <input type="checkbox" id="person" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="people">Jack</td> <td class="right cell" id="jack"> <span>0</span> </td> </tr> <tr> <td class="people">Jill</td> <td class="right cell" id="jill"> <span>0</span> </td> </tr> </tbody> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="place"> <i class="fa fa-plus-circle"></i> <b>Place</b> <span>(Click to expand...)</span> </label> <input type="checkbox" id="place" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="city">LA</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> <tr> <td class="city">NYC</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
解决方案2
1 2020-08-03 02:27:31
I added a span with class arround your text.我在您的文本周围添加了一个带有 class 的跨度。
I used the function parent() to get to td previous tag and find() function to the span tag and a "close" class name to your button to check if it's close or not in a condition.我使用 function parent() 获取 td previous 标签，使用 find() function 获取 span 标签，并使用“close” class 名称为您的按钮检查它是否处于关闭状态。
$(document).ready(function() { $('.hide').hide(); $('[data-toggle="toggle"]').click(function() { if($(this).is('.close')) { $(this).parent('td').find('b:first').text('Person (-)'); $(this).parent('td').find('.textLabel').text(''); $(this).removeClass('close'); } else { $(this).parent('td').find('b:first').text("Person"); $(this).parent('td').find('.textLabel').text('(Click to expand...)'); $(this).addClass('close'); } $(this).parents().next('.hide').toggle(); }); });
[data-toggle="toggle"] { display: none; }.label { display: block; } table, tr, th, td { border: 1px solid black; border-collapse: collapse; font-family: Arial; width: 100%; }
<table> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="person"> <i class="fa fa-plus-circle"></i> <b>Person</b> <span class="textLabel">(Click to expand...)</span> </label> <input type="checkbox" id="person" data-toggle="toggle" class="close"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="people">Jack</td> <td class="right cell" id="jack"> <span>0</span> </td> </tr> <tr> <td class="people">Jill</td> <td class="right cell" id="jill"> <span>0</span> </td> </tr> </tbody> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="place"> <i class="fa fa-plus-circle"></i> <b>Place</b> <span class="textLabel">(Click to expand...)</span> </label> <input type="checkbox" id="place" data-toggle="toggle" class="close"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="city">LA</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> <tr> <td class="city">NYC</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解决方案3
1 已采纳 2020-08-03 02:52:42
You can put the "(Click to expand...)" inside of a <span> as well as adding " <i class="fa fa-minus-circle"></i> " and hiding it with js.您可以将“(Click to expand...)”放在<span>内，也可以添加“ <i class="fa fa-minus-circle"></i> ”并用 js 隐藏它。 Then just toggle everything along with " <i class="fa fa-plus-circle"></i> "然后只需切换所有内容以及“ <i class="fa fa-plus-circle"></i> ”
The finished code:完成的代码：
$(document).ready(function() { $('.hide').hide(); $('.fa-minus-circle').hide(); //This hides the minus button $('[data-toggle="toggle"]').change(function() { //This takes the label of the same id as the input, so we can get their children. Afterwards we toggle everything. $("label[for='"+this.id+"'] i.fa-plus-circle").toggle() $("label[for='"+this.id+"'] i.fa-minus-circle").toggle() $("label[for='"+this.id+"'] span").toggle() $(this).parents().next('.hide').toggle(); }); });
[data-toggle="toggle"]{ display: none; }.label { display: block; } table, tr, th, td { border: 1px solid black; border-collapse: collapse; font-family: Arial; width: 100%; }
<table> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="person"> <i class="fa fa-plus-circle"></i> <.-- New minus <i> --> <i class="fa fa-minus-circle"></i> <.-- Click to expand inside span <i> --> <b>Person</b> <span>(Click to expand...)</span> </label> <input type="checkbox" id="person" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="people">Jack</td> <td class="right cell" id="jack"> <span>0</span> </td> </tr> <tr> <td class="people">Jill</td> <td class="right cell" id="jill"> <span>0</span> </td> </tr> </tbody> <tbody class="section"> <tr> <td colspan="2"> <label class="label" for="place"> <i class="fa fa-plus-circle"></i> <.-- New minus <i> --> <i class="fa fa-minus-circle"></i> <:-- Click to expand inside span <i> --> <b>Place</b> <span>(Click to expand...)</span> </label> <input type="checkbox" id="place" data-toggle="toggle"> </td> </tr> </tbody> <tbody class="hide"> <tr> <td class="city">LA</td> <td class="right cell" id="la"> <span>0</span> </td> </tr> <tr> <td class="city">NYC</td> <td class="right cell" id="nyc"> <span>0</span> </td> </tr> </tbody> </table> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.