单击一个元素会将显示的内容替换为新内容答案

【问题标题】：Clicking on an element replaces the displayed content by a new one单击一个元素会将显示的内容替换为新内容
【发布时间】：2021-12-27 15:53:20
【问题描述】：

使用 jQuery，我希望能够在一侧显示可点击元素的列表，而在另一侧，根据点击的元素显示不同的文本。每次单击元素都会替换之前显示的文本。

我做不到。

我尝试了很多不同的方法，例如 show()、hide()、replaceAll()、replaceWith()...

我尝试通过测试要显示的元素的存在来插入条件。

我无法获得所需的行为。

有什么想法吗？

【问题讨论】：

好的，您能否分享您的“minimal reproducible example”代码（html.css 和 jQuery/JavaScript）向我们展示您的最佳尝试，以便我们尝试解释原因您的尝试失败了，以及如何使用 JavaScript/jQuery，以便我们可以轻松地重现您的问题。单击的文本如何确定要显示的内容？请：拨打tour，并阅读“How to Ask”指南。
好的，我会处理的
我找到了一个解决方案，它可以工作我将 html 代码包含在一个 php 文件中，当我需要它时使用 include() 调用它；然后我必须调用 load() 方法来加载我的文件。我对列表中的几项也这样做。
$('#alpha').on("click", function(){ $('.text').load('integration_alpha.php'); });
很抱歉，这种做事方式已被贬低。建议使用 getScript() 或 ajax() 方法。我会调查一下。

标签： jquery methods replace display

【解决方案1】：

您可以使用 .html 从一侧显示文本到另一侧，或单击页面上的任何元素并显示文本或更改页面上的任何内容。

例如。

下面给出了一些 HTML 按钮和 js 代码。您可以在单击任何按钮时看到。右边的文字会根据按钮的文字而改变。

$('button').on('click',function(){
        var side_text = $(this).text();
        $('.seconed_side').html(side_text);
      });

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div style="display: flex">
<div class="first_side" style="width: 50%;">
    <button>Click Me</button>
    <button>Show Me</button>
    <button>Hide Me</button>
    <button>Save</button>
    <button>Proceed</button>
    <button>Next</button>
    <button>Previous</button>
</div>
<div class="seconed_side" style="width: 50%;">
    
</div>
</div>

【讨论】：

我的问题已经解决了，谢谢