Question

以前肯定有人问过/回答过，我真的不知道如何制定它，所以找不到任何东西

我有两个字段street_1和street_2，两个字段的操作应该完全相同，所以我想知道我是否能以某种方式对这两个字段使用相同的函数，方式是它将在1和2之间交替，具体取决于使用哪个字段。

例如：

$('street_1').on('input', function(e){
  document.getElementById('count1').innerHTML = $('street_1').value.length+'/'+ max;
  if ($('street_1').value.length>max) {
    document.getElementById('count1').style.color = "red";
  }
  else document.getElementById('count1').style.color = "black";
});

如果1's是接收输入的字段，则所有2都应更改为street_2。

HTML

<div class="fieldset">
        <h2 class="legend"><?php echo $this->__('Address') ?></h2>
        <ul class="form-list">
        <?php $_streetValidationClass = $this->helper('customer/address')->getAttributeValidationClass('street'); ?>
            <li class="wide">
                <label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
                <div style="position: relative;" class="input-box">
                    <input style="color: transparent; caret-color: black; z-index: 1;" type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="street
                        input-text
                        form-control
                        required-entry
                     <?php echo $_streetValidationClass ?>" />
                     <span id="street1span" class="input-text" style="display: inline-block; white-space: nowrap; overflow-x: hidden; width: 98%; position: absolute; top: 0.25px; left: 2px; padding: 1px; z-index: 2; pointer-events: none;" ></span>
                     <span id="count1" class="input-text" style="position: absolute; display: block; right: 5px; top: 2px; z-index: 9;"></span>
                </div>

我再次使用相同的设置，只有2's street_1，street2span和count2

Answer 1

就像一个简单的例子，假设您想要为两个链接执行此操作：

<a href="#" id="street_1">One</a>
<a href="#" id="street_2">Two</a>

你可以很容易地分辨出哪一个，并得到你想要的那个数字，如下：

$('#street_1, #street_2').on('click', function(){
  var theNum = $(this).attr('id').split('_')[1];
  // now you can use theNum any way you want
  console.log( theNum );
});

Answer 2

对于所需的输入，

street_1和street_2为ids，因此您必须使用$符号才能执行jquery选择器。

此外，我建议您不要将 javascript 与 jquery 混合使用。只使用一个。

我使用了closest，find和eq来查找属于所需span的{{1}}元素。您可以通过以下方式进行：

input

变量根据使用的字段而变化

2 个答案: