代码之家 › 专栏 › 技术社区 › Kyle

重构jquery代码3重复的函数

jquery

Kyle · 技术社区 · 8 年前

首先,我不确定这是否偏离主题,如果是,请删除。我一直在处理一些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。任何帮助都将不胜感激。

2 回复 | 直到 8 年前

Zenoo 8 年前

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

附言:我也编辑了你找到第一个输入的方式。你首先得找到最近的 .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>

Satpal 8 年前

根据当前的HTML,使用 .closest() form-group 然后使用 .prev() 得到它的兄弟姐妹。

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

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

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

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

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

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