基于Radio Button实现div.desc文本过滤功能的问题排查

你的代码主要存在几个关键问题，导致过滤功能无法正常工作：

1. 选择器与操作对象错误 #

原代码中$("#elenco > .desc")试图选中#elenco的直接子元素.desc，但实际.desc是.cliente的子元素，而且你需要隐藏/显示的是整个客户区块（.cliente），不是仅.desc部分，否则客户的按钮等内容还会残留显示。

2. Filter逻辑完全失效 #

div元素的value不是标准属性，不能直接用this.value获取；同时原filter函数没有将.desc的属性/文本与单选按钮的值做对比，根本起不到过滤作用。

3. 缺少初始执行逻辑 #

页面加载时没有触发过滤，默认选中的All按钮无法确保所有内容正确显示。

修复后的完整代码 #

HTML部分（可保留原结构，推荐用data-value替代非标准value属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test" /><label>All</label>
<input type="radio" value="PROD" name="test" /><label> PROD</label>
<input type="radio" value="TEST" name="test" /><label>TEST</label>

<div id="elenco">
  <div class="cliente">
    cliente
    <div class="desc" data-value="PROD">
      betafrik prod <br />
      <img src="" />
    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
      <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
      <br />
      <ul>
        <li>
          <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div>
        </li>
        <li>
          <button type="button" onclick="reloadmem()" class="rs1">10.13.1.47</button>
          <div class="result" id="resultBetafrikP1">Risultato</div>
        </li>
        <li>
          <button type="button" onclick="reloadmem()" class="rs1">10.13.1.48</button>
          <div class="result" id="resultBetafrikP2">Risultato</div>
        </li>
      </ul>
    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" data-value="TEST">
      betitaly test <br />
      <img src="" />
    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br />
      <ul>
        <li>
          <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li>
          <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="cliente">
    cliente
    <div class="desc">
      vincitù test <br />
      <img src="" />
    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerVincituT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br />
      <ul>
        <li>
          <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneVincituT">Risultato</div>
        </li>
        <li>
          <button type="button" onclick="reloadmem()" class="rs1">10.55.0.71</button>
          <div class="result" id="resultVincituP">Risultato</div>
        </li>
      </ul>
    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" data-value="TEST">
      betitaly test <br />
      <img src="  " />
    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br />
      <ul>
        <li>
          <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li>
          <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>
    </div>
  </div>
</div>

jQuery部分 #

$(function () {
  // 提取过滤逻辑为独立函数，复用代码
  function filterContent(filterValue) {
    $("#elenco .cliente").hide(); // 先隐藏所有客户区块
    if (filterValue === "All") {
      $("#elenco .cliente").show(); // 显示全部内容
    } else {
      $("#elenco .cliente").filter(function() {
        var $desc = $(this).find(".desc");
        // 同时检查desc的属性值和文本内容（不区分大小写）
        var attrValue = $desc.attr("data-value") || "";
        var textContent = $desc.text().toLowerCase();
        return attrValue.toUpperCase() === filterValue || textContent.includes(filterValue.toLowerCase());
      }).show();
    }
  }

  // 页面加载时执行一次，确保默认选中All时内容正确显示
  filterContent($('input[name="test"]:checked').val());

  // 绑定单选按钮的change事件（比click更符合交互规范）
  $('input[name="test"]').on("change", function () {
    filterContent(this.value);
  });
});

关键修复说明 #

• 改用#elenco .cliente作为操作对象，确保隐藏/显示整个客户模块
• 使用data-value替代非标准的value属性，若不想修改原HTML，可将attr("data-value")改为attr("value")兼容
• 过滤逻辑同时覆盖属性匹配和文本内容匹配，解决部分.desc未设置属性但文本含关键词的情况
• 提取过滤逻辑为独立函数，实现代码复用，同时在页面初始化时执行一次，确保默认状态正确
• 改用change事件替代click，更符合单选按钮的交互逻辑

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