如何仅隐藏Button内的子Image而非整个按钮？代码问题求助

我看到你的问题了——现在点击按钮会把整个按钮都隐藏，这是因为你自定义的$函数和它的hide方法逻辑有问题，而且还不小心覆盖了页面已经引入的jQuery。咱们一步步来修复：

问题根源 #

1. 你自己写了一个$函数，这直接覆盖了页面引入的jQuery的$对象，导致jQuery的所有功能都没法正常使用了。
2. 当前你的hide方法是直接隐藏传入的选择器（也就是按钮本身），而不是定位到按钮内部的图片元素。

解决方案1：修复自定义的函数 #

如果你想保留自己的函数逻辑，可以修改它的实现，让它定位到按钮内部的<img>元素再隐藏，同时避免和jQuery冲突：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>question</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
  <script> 
  // 把自定义函数改名，避免和jQuery的$冲突
  function myQuery(selector) {
    // 先获取实际的DOM元素
    const element = typeof selector === 'object' ? selector : document.querySelector(selector);
    var resultObject = {
      hideImage: function () {
        // 找到当前元素下的img子元素并隐藏
        const img = element.querySelector('img');
        if(img) {
          img.style.visibility = "hidden";
          // 如果你想完全移除图片占位，也可以用：img.style.display = "none";
        }
      }
    };
    return resultObject;
  } 
  </script> 
</head> 
<body> 
  <div class="container"> 
    <button class="btn btn-primary btn-block" style="text-align:left; padding-left:16px" id ="another" onclick="myQuery(this).hideImage();">
      click 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnwz8a0e72g6QXU5j3DT1bkyheIhJIW7O8razr8sydbUYOK6sF&s" id="up" style="display: inline"width="20" height="20"> 
    </button> 
  </div> 
</body> 
</html>

解决方案2：直接使用jQuery（更推荐） #

既然页面已经引入了jQuery，完全可以直接用它的API来实现，简洁又可靠，还不会有冲突问题：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>question</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
  <script> 
    // 页面加载完成后绑定点击事件
    $(function() {
      $('#another').click(function() {
        // 找到当前按钮内的img元素并隐藏
        $(this).find('img').hide();
        // 如果只想隐藏但保留占位，改用：$(this).find('img').css('visibility', 'hidden');
      });
    });
  </script> 
</head> 
<body> 
  <div class="container"> 
    <button class="btn btn-primary btn-block" style="text-align:left; padding-left:16px" id ="another">
      click 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnwz8a0e72g6QXU5j3DT1bkyheIhJIW7O8razr8sydbUYOK6sF&s" id="up" style="display: inline"width="20" height="20"> 
    </button> 
  </div> 
</body> 
</html>

补充说明 #

• visibility: hidden会隐藏元素但保留它在页面上的占位空间，而display: none会完全移除元素的占位，你可以根据需求选择。
• 推荐使用jQuery的事件绑定方式（而非内联onclick），这样代码更易维护，也符合现代前端的实践规范。

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