javascript - 我需要帮助在 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>