时间戳

首页 > 解决方案 > 如何在按钮单击时更改整个 div 内容

javascript - 如何在按钮单击时更改整个 div 内容

问题描述

我试图通过单击 div 内的按钮来更改 div 的内容。div 包含几个按钮，在每个按钮单击时，我想显示一个带有文本的新 div，通过单击新 div，我想显示原始 div。

这是原始的div：

<div id="services" class="container-fluid text-center">
    <div class="col-sm-4">
        <button class="glyphicon glyphicon-heart logo-small"></button>
        <h4>blalala</h4>
        <p>blalala</p>
    </div>
</div>

我试图通过单击按钮而不是“服务” div 来显示不同的 div。

标签： javascripthtml

解决方案

我希望这有帮助。
我们有一个divhold 3 buttons，每个button都有它自己的文本值。
每次我们单击 a 时，button我们都会创建一个新div的 a ，其中包含我们单击p的值。button

(function(){
    function printButtons(){
        // array to store the HTML output
        const output = [];

        // loop to get all the buttons
        myBtnsArr.forEach((button) => {
            let myBtn = `<button class="${button.class}" id="${button.id}">
                            ${button.content}
                         </button>`;
            //print the results
            output.push(myBtn);
            buttonsDiv.innerHTML = output.join('');
        });
    }

    // the div we're going to print the buttons in it
    const buttonsDiv = document.getElementById('allBtns');
    // all the buttons (in an array)
    const myBtnsArr = [
        {class: 'myBtn', id: 'button1', content: 'button 1'},
        {class: 'myBtn', id: 'button2', content: 'button 2'},
        {class: 'myBtn', id: 'button3', content: 'button 3'}
    ];

    // Run the function 
    printButtons();
})();


// Get the button
let myBtn1 = document.getElementById('button1');
let myBtn2 = document.getElementById('button2');
let myBtn3 = document.getElementById('button3');
let myDiv = document.getElementById('myDiv');

// Run the "createdNewDiv" function when clicking on the button, passing the text as an argument
myBtn1.addEventListener('click', () => {
    let button1Text = "This is button 1 text";
    createNewDiv(button1Text);
});
myBtn2.addEventListener('click', () => {
    let button2Text = "This is button 2 text";
    createNewDiv(button2Text);
});
myBtn3.addEventListener('click', () => {
    let button3Text = "This is button 3 text";
    createNewDiv(button3Text);
});

// When calling the functuin....
function createNewDiv(text){
    // 1- We create a new div 
    let theNewDiv = document.createElement('div');
    theNewDiv.classList.add('createdDiv');
    
    // 2- We create a new pagaraph to hold the text we passed 
    let thewNewPagaraph = document.createElement('p');
    thewNewPagaraph.classList.add('createdParagraph');
    thewNewPagaraph.innerHTML = text;
    
    // append the 'p' to the 'div'
    theNewDiv.appendChild(thewNewPagaraph);
    
    // append the new div to the original div
    myDiv.appendChild(theNewDiv);
    
    // when clicking on the new div we delete it, then we see the original div back.
    let createdDiv = document.querySelector('.createdDiv');
    createdDiv.addEventListener('click', () => {
        createdDiv.remove();
    });
}
#myDiv {
    border: 1px solid;
    width: 400px;
    height: 200px;
    padding: 20px 0;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

#allBtns {
    display: flex;
    justify-content: space-around;
}

.createdDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ebebeb;
    border-radius: 4px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
        <div id="myDiv">
            <div id="allBtns"></div>
            <h4 id="myHeading">My h4</h4>
            <h4 id="myParagraph">My pagaraph</h4>
        </div>

推荐阅读