点击单选按钮切换输入类型时，jQuery移除accept属性报错求助

错误原因 #

$('#feed-file').get(0)获取的是原生DOM元素，而removeAttr()是jQuery专属方法，原生DOM对象没有这个方法，所以会抛出TypeError。原生DOM元素对应的属性移除方法是removeAttribute()。

另外代码存在逻辑隐患：切换输入类型时先修改ID，后续用新ID查找元素可能出现匹配失败，建议提前缓存元素，减少重复DOM查询。

修正后的代码 #

JavaScript 代码

$('.form-check-input').on('change', function() {
  // 缓存父容器、输入框、标签元素，避免重复查找DOM
  const inputContainer = $('#rss-input-div');
  const inputEl = inputContainer.find('input').get(0);
  const labelEl = inputContainer.find('label').get(0);

  if (this.id === 'radio-rss-feed') {
    // 切换为URL输入框
    inputEl.type = 'url';
    inputEl.name = 'feed-url';
    inputEl.id = 'feed-url';
    // 用原生DOM方法移除属性
    inputEl.removeAttribute('accept');
    
    // 更新标签关联与文本
    labelEl.htmlFor = 'feed-url';
    labelEl.textContent = 'Feed URL';
  } else if (this.id === 'radio-rss-file') {
    // 切换为File输入框
    inputEl.type = 'file';
    inputEl.name = 'feed-file';
    inputEl.id = 'feed-file';
    inputEl.accept = ".rss,text/xml";
    
    // 更新标签关联与文本
    labelEl.htmlFor = 'feed-file';
    labelEl.textContent = 'Feed File';
  }
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method='post' id='rss-post-form'>
  <!-- 输入框容器 -->
  <div class="mb-3" id="rss-input-div">
    <label for='feed-url' class='form-label'>Feed URL</label>
    <input class='form-control' id='feed-url' name='feed-url' type='url'>
  </div>

  <!-- 单选按钮组 -->
  <div class="form-check form-check-inline" id="feed-form-check">
    <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-feed" checked>
    <label for="radio-rss-feed" class="form-check-label">Rss Feed</label>
  </div>

  <div class="form-check form-check-inline" id="file-form-check">
    <input class="form-check-input" type="radio" name="radio-rss" id="radio-rss-file">
    <label for="radio-rss-file" class="form-check-label">Rss File</label>
  </div>
</form>

额外优化说明 #

• 提前缓存DOM元素，减少重复查询操作，提升页面性能
• 通过父容器定位子元素，避免因ID动态变化导致的选择器失效问题
• 简化逻辑结构，减少冗余的DOM调用

内容的提问来源于stack exchange，提问作者ntf