18910140161

JavaScript-在单击不同按钮时访问不同的数据对象-堆栈溢出

顺晟科技

2022-10-19 14:28:15

128

我在HTML中有一个模式框架,模式的数据在JavaScript中。 我试图在单击不同按钮的同时访问不同的数据对象,但我希望使用相同的模式框架。 目前在移动工作。 现场演示:https://adamteddychang.github.io/hello-portfolio/ HTML:

按钮1的代码:

按钮2的代码:

<div class="modal" id="modal">
        <div class="modal_dialog">
          <header class="modal_header">
           <h1 class="modal_title"></h1>
            <button class="close-modal" aria-label="close modal" data-close = "modal">
              ✕  
            </button>
          </header>
          <section class="modal_content">
            <ul id="lang-contain_modal">
                
                <li class="lang-li_modal" id="lang1"></li>
                <li class="lang-li_modal" id="lang2"></li>
                <li class="lang-li_modal" id="lang3"></li>
            </ul>
            <img src="" alt="Project Image in Modal" height="220" id="proj_img">
            
            <p id="proj_content"></p>
          </section>
          <div id="modal_buttons">
          <button class="see_btns"><a href="" id="see_live" target="blank">See Live </a><img src="Images/share.png" height="24" alt=""></button>
          <button class="see_btns"><a href="" id="see_src" target="blank">See Source</a><img src="Images/whitegithub.png" height="24" alt=""></button>
        </div>
    </div>
      </div>

编辑:

当我单击第一个按钮时,我想访问第一个部分,当我单击第二个按钮时,我想访问第二个部分


顺晟科技:

可以创建函数并将对象作为参数传递;内部函数get元素和rewirte值:

<div class="modal" id="modal">
        <div class="modal_dialog">
          <header class="modal_header">
           <h1 class="modal_title"></h1>
            <button class="close-modal" aria-label="close modal" data-close = "modal">
              ✕  
            </button>
          </header>
          <section class="modal_content">
            <ul id="lang-contain_modal">
                
                <li class="lang-li_modal" id="lang1"></li>
                <li class="lang-li_modal" id="lang2"></li>
                <li class="lang-li_modal" id="lang3"></li>
            </ul>
            <img src="" alt="Project Image in Modal" height="220" id="proj_img">
            
            <p id="proj_content"></p>
          </section>
          <div id="modal_buttons">
          <button class="see_btns"><a href="" id="see_live" target="blank">See Live </a><img src="Images/share.png" height="24" alt=""></button>
          <button class="see_btns"><a href="" id="see_src" target="blank">See Source</a><img src="Images/whitegithub.png" height="24" alt=""></button>
        </div>
    </div>
      </div>
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航