Question

首先，我不确定这是不是主题，如果是，请删除。我一直在搞乱一些jQuery并拥有这3个简单的重复函数：

 $('#manualURL').click(function () {
        if ($(this).val() === 'Use Default URL') {
            $('#provUrl').prop('readonly', true);
            $('#provUrl').val(url);
            $(this).val('Enter Manual URL');
        } else {
            $('#provUrl').prop('readonly', false);
            $('#provUrl').val('');
            $(this).val('Use Default URL');
        }
    });
    $('#listManualURL').click(function () {
        if ($(this).val() === 'Use Default URL') {
            $('#listProvUrl').prop('readonly', true);
            $('#listProvUrl').val(url);
            $(this).val('Enter Manual URL');
        } else {
            $('#listProvUrl').prop('readonly', false);
            $('#listProvUrl').val('');
            $(this).val('Use Default URL');
        }
    });
    $('#registerManualURL').click(function () {
        if ($(this).val() === 'Use Default URL') {
            $('#registerProvUrl').prop('readonly', true);
            $('#registerProvUrl').val(url);
            $(this).val('Enter Manual URL');
        } else {
            $('#registerProvUrl').prop('readonly', false);
            $('#registerProvUrl').val('');
            $(this).val('Use Default URL');
        }
    });

HTML：

 <div class="form-group">
      <input class="form-control" name="list_url" type="text" id="registerProvUrl" value="https://provisioning.mymetis.co.uk/snom?mac={mac}" readonly placeholder="Provisioning URL"/>
 </div>
 <div class="form-group">
           <div class="form-check form-check-inline">
                 <input class="btn btn-default urls" type="button" name="registerManualURL" id="registerManualURL" value="Enter manual Provisioning URL"
       </div>
</div>

我做到了这一点，然后意识到.prev()会返回我点击的元素。

$('.urls').click(function () {
      $(this).prev('.form-group').find(':input').prop('readonly', false).val('');
});

唯一的区别是按钮的ID和文本字段的ID。任何帮助，将不胜感激。

Answer 1

根据您当前的HTML，使用.closest()遍历祖先form-group，然后使用.prev()获取其兄弟。

var input = $(this).closest('.form-group').prev('.form-group').find(':input');

＆＃13;

$('.urls').click(function() {
  var input = $(this).closest('.form-group').prev('.form-group').find(':input');
  input.val('set text');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input class="form-control" name="list_url" type="text" id="registerProvUrl" value="" readonly placeholder="Provisioning URL" />
</div>
<div class="form-group">
  <div class="form-check form-check-inline">
    <input class="btn btn-default urls" type="button" name="registerManualURL" id="registerManualURL" value="Enter manual Provisioning URL">
  </div>
</div>

＆＃13;

但是，我建议将HTML片段分组到一个容器中

＆＃13;

$('.urls').click(function() {
  var input = $(this).closest('.cointainer').find('.url:input');
  input.val('set text');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cointainer">
  <div class="form-group">
    <input class="form-control url" name="list_url" type="text" readonly placeholder="Provisioning URL" />
  </div>
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="btn btn-default urls" type="button" name="registerManualURL" id="registerManualURL" value="Enter manual Provisioning URL">
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以检查输入的当前值并相应地进行更改。

这里我在输入按钮的值上使用了三元运算符：

PS：我也编辑了你找到第一个输入的方式。您首先必须找到最接近的.form-group，然后选择其上一个元素。

$('.urls').click(function () {
      $(this).closest('.form-group').prev().find('input').prop('readonly', false).val('');
      $(this).val(this.value.includes('Default') ? 'Enter Manual URL' : 'Use Default URL');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
      <input class="form-control" name="list_url" type="text" id="registerProvUrl" value="https://provisioning.mymetis.co.uk/snom?mac={mac}" readonly placeholder="Provisioning URL"/>
 </div>
 <div class="form-group">
      <div class="form-group">
           <div class="form-check form-check-inline">
                 <input class="btn btn-default urls" type="button" name="registerManualURL" id="registerManualURL" value="Enter manual URL">
           </div>
       </div>
</div>

重构jQuery代码3重复功能

2 个答案: