Js点击条件显示

Question

我正在做一个在线投资组合项目，在“关于我”部分我想有 3 个不同的选项卡：生活、教育、经验。在第一个页面加载时，第一个将是可见的，点击另一个后，将显示第一个的文本而不是之前的文本。

let about_me_data = [
    {
        "title": "Life",
        "text": "Nullam ac quam non risus dictum viverra non id massa. Donec rhoncus sem at leo iaculis, tempor facilisis sem porttitor. Praesent sit amet quam ultricies, vulputate odio hendrerit, dictum eros. Aenean mattis ultricies tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam imperdiet dolor et dignissim luctus. Morbi laoreet tempor feugiat."
    },
    {
        "title": "Education",
        "text": "Sed malesuada porta quam. Proin pretium eu augue vitae pellentesque. Nullam volutpat urna ac tellus bibendum tincidunt. Maecenas ultrices et nunc consectetur cursus. Suspendisse varius vitae risus sed aliquam. Cras nisi leo, scelerisque at dolor sed, sagittis eleifend nisl. Etiam id arcu luctus, vehicula arcu id, dictum nisi. Nullam aliquet ultricies erat. Vivamus a ultrices velit, ac malesuada elit."
    },
    { 
        "title": "Experience",
        "text": "Integer non maximus arcu. Nullam ut odio quis ligula interdum consectetur. Aliquam dignissim eu nibh ut accumsan. Phasellus volutpat nibh lorem, ac efficitur justo cursus ut. Etiam sed rutrum elit. Aenean lacus velit, sollicitudin quis malesuada nec, vestibulum eu tortor. Aenean dapibus commodo nibh ac ornare."
    }
];

for (i = 0; i < about_me_data.length; i++){
    let title = document.createElement('p');
    title.innerHTML = about_me_data[i].title;
    title.setAttribute('class', 'about-me-tabs hvr-underline-from-center');
    title.addEventListener('click', conditionalDisplay(i));
    document.getElementById('about-me-tabs-titles').appendChild(title);
};

function displayFirstTab(){
    let firstTab = document.createElement('p');
    firstTab.innerHTML = about_me_data[0].text;
    document.getElementById('about-me-tabs-text').appendChild(firstTab);
};
window.onload(displayFirstTab());

function conditionalDisplay(i) {
    let text = document.createElement('p');
    text.innerHTML = about_me_data[i].text;
    document.getElementById('about-me-tabs-text').appendChild(text);
};

这就是我尝试做的。我只是不知道我应该在哪里编写 conditionalDisplay 函数或者我应该传递给它什么 - “i” 或点击的标题。

我试过的另一种方法是这个（仍然不起作用）：

for (i = 0; i < about_me_data.length; i++){
    title.addEventListener('click', conditionalDisplay(title.innerHTML));
};

function conditionalDisplay(title) {
    let text = document.createElement('p');
 
    if (title === about_me_data[0].title) {
        text.innerHTML = about_me_data[0].text;
        document.getElementById('about-me-tabs-text').appendChild(text);
    } else if (title === about_me_data[1].title) {
        text.innerHTML = about_me_data[1].text;
        document.getElementById('about-me-tabs-text').appendChild(text);
    } else if (title === about_me_data[2].title) {
        text.innerHTML = about_me_data[2].text;
        document.getElementById('about-me-tabs-text').appendChild(text);
    };
};

<div id="about-me-tabs-titles"></div>
<div id="about-me-tabs-text"></div>

这是我尝试显示文本的地方。

使用上面的尝试，显示了所有 3 个文本 + 来自 displayFirstTab 函数的一个。我需要一种方法能够对它们应用 hidden/visible 样式，一次一个，然后在单击另一个时将其从上一个样式中删除。

我是一步一步写的，但我想要一个更自动化的功能。

我做错了什么？

Answer 1

您可以尝试使用标题作为元素的 class，如下所示：

let about_me_data = [
    {
        "title": "Life",
        "text": "Nullam ac quam non risus dictum viverra non id massa. Donec rhoncus sem at leo iaculis, tempor facilisis sem porttitor. Praesent sit amet quam ultricies, vulputate odio hendrerit, dictum eros. Aenean mattis ultricies tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam imperdiet dolor et dignissim luctus. Morbi laoreet tempor feugiat."
    },
    {
        "title": "Education",
        "text": "Sed malesuada porta quam. Proin pretium eu augue vitae pellentesque. Nullam volutpat urna ac tellus bibendum tincidunt. Maecenas ultrices et nunc consectetur cursus. Suspendisse varius vitae risus sed aliquam. Cras nisi leo, scelerisque at dolor sed, sagittis eleifend nisl. Etiam id arcu luctus, vehicula arcu id, dictum nisi. Nullam aliquet ultricies erat. Vivamus a ultrices velit, ac malesuada elit."
    },
    { 
        "title": "Experience",
        "text": "Integer non maximus arcu. Nullam ut odio quis ligula interdum consectetur. Aliquam dignissim eu nibh ut accumsan. Phasellus volutpat nibh lorem, ac efficitur justo cursus ut. Etiam sed rutrum elit. Aenean lacus velit, sollicitudin quis malesuada nec, vestibulum eu tortor. Aenean dapibus commodo nibh ac ornare."
    }
];

for (let i = 0; i < about_me_data.length; i++){
  let title = document.createElement('p');
  title.innerHTML = about_me_data[i].title;
  title.setAttribute('class', 'about-me-tabs hvr-underline-from-center');
  //wrap the function call with anonymous function so that it can be called only when clicked
  title.addEventListener('click', function(){ conditionalDisplay(i, about_me_data[i].title)});
  document.getElementById('about-me-tabs-titles').appendChild(title);
  conditionalDisplay(i, about_me_data[i].title);
};

function displayFirstTab(){
  //get all p
  var all = document.querySelectorAll('#about-me-tabs-text p');
  //show first and hide rest
  all.forEach((i,idx) => idx==0? i.style.display="block":i.style.display="none");
};


function conditionalDisplay(i, cls) {
  //get all
  var all = document.querySelectorAll('#about-me-tabs-text p');
  //hide all
  all.forEach(i => i.style.display="none");
  //get the current element by maching the class
  var current = document.querySelector(`.${cls}`);
  if(current != null){
    //show the current element
    current.style.display="block"
  }
  else{
    //create element if not exist
    let text = document.createElement('p');
    text.innerHTML = about_me_data[i].text;
    text.classList.add(cls);
    document.getElementById('about-me-tabs-text').appendChild(text);
  }
};

displayFirstTab();

<div class="d-flex flex-row" id="about-me-tabs-titles"></div>
<div id="about-me-tabs-text"></div>

Answer 2

您的代码库中存在一些错误：

window.onload 应该是一个函数，当页面和相关内容已经加载时将被调用。您正在尝试立即调用 displayFirstTab 而无需等待标记加载事件；
通常，与页面上的标记交互的每个代码都应仅在此类标记准备就绪时使用。这就是为什么我移动了在 window.onload;
因为您一次只有一个文本用于所选标题，所以使用 appendChild 没有意义。这就是为什么我将其更改为修改元素的 innerText 属性;
您对 addEventListener 的工作原理有误解。您需要将一个函数作为参数传递给 addEventListener，当触发此类事件时将调用该函数；

这是更正后的：

    let about_me_data = [
        {
            "title": "Life",
            "text": "Nullam ac quam non risus dictum viverra non id massa. Donec rhoncus sem at leo iaculis, tempor facilisis sem porttitor. Praesent sit amet quam ultricies, vulputate odio hendrerit, dictum eros. Aenean mattis ultricies tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam imperdiet dolor et dignissim luctus. Morbi laoreet tempor feugiat."
        },
        {
            "title": "Education",
            "text": "Sed malesuada porta quam. Proin pretium eu augue vitae pellentesque. Nullam volutpat urna ac tellus bibendum tincidunt. Maecenas ultrices et nunc consectetur cursus. Suspendisse varius vitae risus sed aliquam. Cras nisi leo, scelerisque at dolor sed, sagittis eleifend nisl. Etiam id arcu luctus, vehicula arcu id, dictum nisi. Nullam aliquet ultricies erat. Vivamus a ultrices velit, ac malesuada elit."
        },
        {
            "title": "Experience",
            "text": "Integer non maximus arcu. Nullam ut odio quis ligula interdum consectetur. Aliquam dignissim eu nibh ut accumsan. Phasellus volutpat nibh lorem, ac efficitur justo cursus ut. Etiam sed rutrum elit. Aenean lacus velit, sollicitudin quis malesuada nec, vestibulum eu tortor. Aenean dapibus commodo nibh ac ornare."
        }
    ];

    function displayFirstTab(){
        document.getElementById('about-me-tabs-text').innerText = about_me_data[0].text;
    }

    function conditionalDisplay(i) {
        return function() {
            document.getElementById('about-me-tabs-text').innerText = about_me_data[i].text;
        }
    }

    window.onload = function() {
        displayFirstTab();

        for (i = 0; i < about_me_data.length; i++) {
            let title = document.createElement('p');
            title.innerHTML = about_me_data[i].title;
            title.setAttribute('class', 'about-me-tabs hvr-underline-from-center');
            title.addEventListener('click', conditionalDisplay(i));
            document.getElementById('about-me-tabs-titles').appendChild(title);
        }
    };

对于此标记：

<div id="about-me-tabs-titles"></div>
<p id="about-me-tabs-text"></p>

Js点击条件显示

Js conditional display on click

html

javascript

addeventlistener

conditional-statements