时间戳

首页 > 解决方案 > 按钮 2 应该从按钮 1 开始所有的东西，但是怎么做呢？

javascript - 按钮 2 应该从按钮 1 开始所有的东西，但是怎么做呢？

问题描述

I 据我所知，我是一个完全的初学者。我所知道的，我已经自学了。我有以下问题。

我有一个通过点击执行的功能。在这个函数中有许多其他的动作，然后执行。现在我想要第二个按钮，它首先再次执行相同的操作。但不想在函数中再次编写所有动作。

肯定有一种方法，当我按下第二个按钮时，按钮一个中的所有内容都会执行？

这是我的按钮 1 代码：

const navSextro = document.getElementById("navSextro")
navSextro.addEventListener("click", (ASC) => {

    for (let navbarBottomLogo of navbarBottomLogos) {
        navbarBottomLogo.style.display = "none"
    }

    for (let contactAdress of contactAdresses) {
        contactAdress.style.display ="none"
    }
    for (let btnleistung of btnleistungen) {
        btnleistung.style.display ="none"
    }
    bgStart.classList.remove("headSectionSextro")
    bgStart.classList.remove("headSectionMendel")
    bgStart.classList.remove("headSectionDaven")
    bgStart.classList.remove("headSectionMuenter")
    bgStart.classList.remove("headSectionWald")
    bgStart.classList.remove("headSectionRick")
    bgStart.classList.remove("headSectionIndustrie")

    bgStart.classList.add("headSectionSextro")

    for (let headTextStart of headTextStarts) {
        headTextStart.style.display = "none"
    }
    
    for (sextroBtnLeistung of sextroBtnLeistungen) {
        sextroBtnLeistung.style.display = "flex"
        sextroBtnLeistung.classList.remove("border-bottom-sextro", "border-bottom-mendel", "border-bottom-daven", "border-bottom-rick", "border-bottom-muenter", "border-bottom-wald", "border-bottom-industrie", )
        sextroBtnLeistung.classList.add("border-bottom-sextro")
    }

    let contactAdressSextro = document.getElementById("kontakt-adress-sextro")
    contactAdressSextro.style.display ="block"

    startSextro.style.display = "block"

    navstart.style.display = "flex"
    navlogo.style.display = "flex"

    sectionOne.style.display ="flex"
    sectionTwo.style.display ="flex"
    sectionThree.style.display ="flex"

    navSecBottom.style.display ="flex"

    mapText.style.display ="none"
    philosophie.style.display ="none"
    bewertungen.style.display ="none"

    const navbottom = document.getElementById("navBottom")
    navbottom.style.display ="none"

    const navAboutUs = document.getElementById("navaboutus")
    navAboutUs.style.display ="none"

    //SET BORDER-BOTTOM COLOR

    let borderSectionThree = document.getElementById("kontakt-adress-sextro")
    borderSectionThree.classList.remove("border-bottom-sextro", "border-bottom-mendel", "border-bottom-daven", "border-bottom-rick", "border-bottom-muenter", "border-bottom-wald", "border-bottom-industrie")
    borderSectionThree.classList.add("border-bottom-sextro")
    
    /*STICKY NAVBAR SEXTROSTRASSE*/
    window.onscroll = function() {stickyNavBarSextro()}
    const stickySextro = document.getElementById("navSecBottom").offsetTop

    function stickyNavBarSextro() {
        if(window.pageYOffset > stickySextro) {
            navSecBottom.classList.add("sticky")
        } else {
            navSecBottom.classList.remove("sticky")
        }
    }
    
})

现在我需要第二个按钮的代码来激活按钮 1 中的所有内容。但是如何？

标签： javascriptfunctionloopsbutton

解决方案

你可以把它变成一个命名函数，并在按下按钮时调用它。您也可以尝试将所有内容拆分为更小的函数，这样它们做的事情就会更少。一个函数应该只做一件事情。

推荐阅读