运行同一页面上 2 个（或更多）实例的脚本

Question

我的 Shopify 商店有一个“剩余字符数”计数器，它显示客户在文本框中还剩下多少字符可以输入。当我在页面上有一个文本框时，它工作得很好，但如果有两个或更多，倒计时文本根本不显示。关于如何在同一页面上多次将其发送到运行有什么想法吗？

$(document).ready(function() {

    var text_max = $('#line_item_text').attr('maxlength');
$('#personalization_feedback').html(text_max + ' characters remaining ');

$('#line_item_text').keyup(function() {
    var text_length = $('#line_item_text').val().length;
    var text_remaining = text_max - text_length;
 $('#personalization_feedback').html(text_remaining + ' characters remaining ');
});


});

Answer 1

而不是在 HTML 元素上使用 id，你需要使用类因为相同的 id 不允许多次进入 HTML 文档，如果你添加它然后它不起作用。

所以使用类并在每个元素上循环代码，就像您使用 id 添加一样。

$(document).ready(function() {
  $('.line_item_text').each(function(idex,ele){
    var text_max = $(ele).attr('maxlength');
    $(ele).next().html(text_max + ' characters remaining ');
    $(ele).keyup(function() {
        var text_length = $(ele).val().length;
        var text_remaining = text_max - text_length;
        $(ele).next().html(text_remaining + ' characters remaining ');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="50" class="line_item_text"></textarea>
<div id="txt1"></div>
<textarea maxlength="50" class="line_item_text"></textarea>
<div id="txt2"></div>

运行同一页面上 2 个（或更多）实例的脚本

Running a script for 2 (or more) instances on same page

javascript

shopify

运行 同一页面上 2 个（或更多）实例的脚本

Running a script for 2 (or more) instances on same page

javascript

shopify

运行同一页面上 2 个（或更多）实例的脚本