我需要帮助在 javascript 中切换文本

Question

所以，我有一个正在开发的网站，它有 3 个 h1 标签，我可以点击这些标签来调用一个函数，现在当我点击它时，我想将 innerHTML 设置为一些东西。

我为此使用 HTML 和 jQuery，我已经尝试过：

uitzendText.innerHTML = $('p#uitzendBureau').text(); 但是没有成功。

这是 HTML 代码：

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
    <p class="text-center" id="uitzendBureau">uitzend</p>
    <p class="text-center" id="ymeKamminga">yme</p>
    <p class="text-center" id="koeriersDienst">koerier</p>
</div>

这是 Javascript 代码：

document.getElementById('uitzendBureau').innerHTML = '';
document.getElementById('koeriersDienst').innerHTML = '';

function showText(text) {
    let uitzendText = document.getElementById('uitzendBureau');
    let koeriersText = document.getElementById('koeriersDienst');
    let ymeText = document.getElementById('ymeKamminga');

    if (text === 'ymeKamminga') {
        console.log(text);
        ymeText.innerHTML = $('p#ymeKamminga').text();
    }
    if (text === 'uitzendBureau') {
        console.log(text);
        uitzendText.innerHTML = $('p#uitzendBureau').text();
        koeriersText.innerHTML = '';
        ymeText.innerHTML = '';
    }

}

Javascript 代码中的前两行是因为我希望访问者在页面首次加载时只看到ymeText。

现在，我希望文本会根据他们点击的标签而改变，但这不会发生。

我在控制台中没有收到任何错误，console.log(text); 确实在 if 语句中给出了预期的结果，所以它确实出现在 if 中。

Answer 1

不确定我是否正确理解了这个问题，但您希望 onclick 中的文本出现在 p# 元素中？我举了一个例子来说明我认为你的意思（如果确实如此，将添加解释）

// reset the html of the elements
$('#uitzendBureau').html('');
$('#koeriersDienst').html('');

function showText(text) {
    // jquery way of selecting elements by their ID
    let uitzendText = $('#uitzendBureau');
    let koeriersText = $('#koeriersDienst');
    let ymeText = $('#ymeKamminga');

    if (text === 'ymeKamminga') {
        console.log('text ymeKamminga:',text);
        // set the text of the yme element to the desired value
        ymeText.html(text);
    }
    if (text === 'uitzendBureau') {
        console.log('text uitzendBureau', text);
        // set the text of the uitzend element to the desired value
        uitzendText.html(text);
        
        // unset the text of the other elements
        koeriersText.html('');
        ymeText.html('');
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
    <p class="text-center" id="uitzendBureau">uitzend</p>
    <p class="text-center" id="ymeKamminga">yme</p>
    <p class="text-center" id="koeriersDienst">koerier</p>
</div>

Answer 2

下面的代码应该可以工作

$(document).ready(function() {
  let uitzendText = $('#uitzendBureau');
  let koeriersText = $('#koeriersDienst');
  let ymeText = $('#ymeKamminga');

  uitzendText.text('');
  koeriersText.text('');

  // Handle click events
  $(document).on('click', ".heading", function() {
    let el = $(this)
    let elementText = el.data('element-text')

    showText(elementText)
  })
  // Handle showing text
  function showText(text) {

    if (text === 'ymeKamminga') {
      ymeText.text(text);
    }
    if (text === 'uitzendBureau') {
      uitzendText.text(text);
      koeriersText.text('');
      ymeText.text('');
    }

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="uitzendBureau">Uitzend<b class="text-orange">bureau</b></h1>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="ymeKamminga">Yme <b class="text-orange">Kamminga</b></h1>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
      <h1 class="mt-3 heading" data-element-text="koeriersDienst">Koeriers<b class="text-orange">dienst</b></h1>
    </div>
  </div>
</div>
<div class="container mt-5">
  <p class="text-center" id="uitzendBureau">uitzend</p>
  <p class="text-center" id="ymeKamminga">yme</p>
  <p class="text-center" id="koeriersDienst">koerier</p>
</div>

---

问题

1. 难道不是简单地隐藏和显示元素吗？
2. 如果您要替换文本，那么一个 div 就足够了吗？

Answer 3

好的，所以我将所有内容都转换为 jQuery 以使事情更简单

首先，确保您的代码在<head></head> 标记内，方法是通过文件或页面代码导入代码。这样做会让你的代码对我来说很好。

其次，确保将值 text 添加到您放入 innerHTML 或 .text() 的任何内容中，因为向您的 div 添加一个空字符串只会使其保持为空。

uitzendText.innerHTML = $('p#uitzendBureau').text(); // p#uitzendBureau is empty, so you are putting an empty string back into an empty string.

现在如果你听从我的建议，把这段代码放在头标签之间，它会起作用的：

$(document).ready(function() {
    $("#uitzendBureau").text('');
    $("#koeriersDienst").text('');
});
function showText(text) {

    if (text === 'ymeKamminga') {
        console.log(text);
        $('p#ymeKamminga').text(text);
    }
    if (text === 'uitzendBureau') {
        console.log(text);
        $('p#uitzendBureau').text(text);
        $("#koeriersDienst").text('');
        $('p#ymeKamminga').text('');
    }

}

一旦我确定 javascript 在 head 标记中，你的代码就可以正常工作，所以我所做的就是确保你的代码也向 DOM 输出我认为你的意图。

Answer 4

Immortal Dude 建议的单一 div 版本：

 function showText(text) {
      $('#text-output').text(text);
  } 

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

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
           <h1 class="mt-3" onclick="showText('uitzendBureau');">Uitzend<b class="text-orange">bureau</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('ymeKamminga');">Yme <b class="text-orange">Kamminga</b></h1>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <h1 class="mt-3" onclick="showText('koeriersDienst');">Koeriers<b class="text-orange">dienst</b></h1>
        </div>
    </div>
</div>
<div class="container mt-5">
  <p class="text-center" id="text-output"></p>
</div>

由于您一次只显示一个文本，因此仅使用 1 个元素来显示 showText 结果也可能有效。