如何根据媒体查询用文本替换按钮元素？

Question

我只是想删除<button>元素，但使用 JavaScript 将按钮中的文本保持在max-width: 768px媒体查询。 我知道它目前是 jQuery。 我可以删除按钮，但无法使媒体查询条件正常工作。

这是按钮，用 JavaScript 移除：

 $(".rent").replaceWith(function() { return $(this).text(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="rent">Rent</button>

这是我尝试使用媒体查询条件删除按钮的内容，但它不起作用：

const mediaQuery = window.matchMedia('(max-width: 768px)');

if (mediaQuery.matches) {
  $(".rent").replaceWith(function() {
    return $(this).text();
  });
}

这是更新，其中一半与事件侦听器一起工作，但在调整大小时中断。

 function checkMediaQuery() { const mediaQuery = window.matchMedia('(max-width: 768px)'); if (mediaQuery.matches) { $(".rent").replaceWith(function() { return $(this).text(); }); } } window.addEventListener('resize', checkMediaQuery);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="rent">Rent</button>

Answer 1

您的替换代码应该可以工作，这取决于您调用它的方式和时间。

尽管假设您仍然希望按钮执行任何操作，但您可以使用css @media规则将按钮设置为看起来像文本。

 @media only screen and (max-width: 480px) { button.rent { background-color: transparent; border: none; } }

 <button class="rent">RENT</button>