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

Question

<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('');
        });
    });

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

Answer 1

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

以本例为例：

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

Answer 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>

Answer 3

在你的问题中你说：

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

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

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

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

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

其他说明：

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