每次单击后更改按钮内的文本

Posted 2023-05-08

【中文标题】每次单击后更改按钮内的文本

【英文标题】：Changing text inside button after every click

【发布时间】：2022-01-19 00:10:30

【问题描述】：

<div class="arrows">
                    <button class="arrow" name="left" type="button" value="less"> << <p class="before"></p></button>
                    <button class="arrow" name="right" type="button" value="more"> >> <p class="after"></p></button>
                </div>

let table = 1;
let $arrowButton = $('.arrow:button');
    $arrowButton.on('click', function(e)
        e.preventDefault();
        let $leftRight;
        //$($leftRight).text('');
        let arrowClick = $(this).attr("value"); 
        
        switch (arrowClick) 
            case 'less':
                table--;
                $leftRight = $('.before');
                break;
            case 'more':
                table++;
                $leftRight = $('.after');
                break;
        
        let $addToArrow = $('<p>' + table + '</p>');
        $($leftRight).append($addToArrow);
        
        $arrowButton.on('mouseout', function() 
            $($leftRight).text('');
        );
    );

必须是一个我显然缺少的简单答案，但我试图在每次单击箭头按钮时替换它内的文本。表格根据单击的左/右箭头递减/递增，然后它应该显示替换之前的文本的文本。

【问题讨论】：

$($leftRight).html($addToArrow);

【参考方案1】：

在追加新值之前尝试清除该值。

以本例为例：

 $($leftRight).empty().append($addToArrow);

【讨论】：

谢谢！这可以按我的意愿工作。

【参考方案2】：

正如 cmets 所述，您只需使用 .html() 替换即可。但是，我看到了一些优化代码的方法。与其在非输入上使用实际的输入属性value，不如使用datasets。此外，您可以将增量值放入该数据集中，以便更轻松地增加变量 table。此外，您可以在 jQuery 中链接您的侦听器，这使得代码更统一、更易于阅读。

More about datasets

let table = 1;
$('.arrow:button').click(function(e) 
  e.preventDefault();
  table += +$(this).data('value')
  $(this).find('div').html(`<p>$table</p>`);
).mouseout(function() 
  $(this).find('div').text('');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="arrows">
  <button class="arrow" name="left" type="button" data-value="-1"> << <div></div></button>
  <button class="arrow" name="right" type="button" data-value="1"> >> <div></div></button>
</div>

【讨论】：

使用这个答案和另一个发布的答案的组合谢谢你的帮助。

【参考方案3】：

在你的问题中你说：

然后它应该显示该文本替换以前的文本。

然而你在这里使用“append”：

$($leftRight).append($addToArrow);

您似乎想在此处改用“html”，这将设置指定元素的内容，从而覆盖（或替换）其中的现有内容，如下所示：

$($leftRight).html($addToArrow);

其他说明：

如果您希望表格计数与“>" 而不是下面，您可以使用 html 跨度 (<span></span>) 而不是段落 (<p></p>)。 您大概可以省略以下行中的段落：let $addToArrow = $('<p>' + table + '</p>');，因为您已经将它插入到段落中（使用“before”或“after”类）。然后它变为let $addToArrow = $(table);，这意味着我们不妨完全省略该行并执行以下操作来保存变量：$($leftRight).html(table);

【讨论】：

我明白你在说什么我在重复自己并添加另一个 p 元素，谢谢你的帮助。