javascript - 复制模式但更改文本和图像

Question

我的网站上有很多模态，我不想每次都复制粘贴我的代码只是为了更改文本和图像。(模态的所有其余部分保持不变)。如果有人帮助我，我将不胜感激做到这一点!

所以我有这个 modaleTemplate 我想每次都复制，然后我想更改以下内容:

-modalImage1
-modalImage2
-modalImage3

-模态标题
-模态文本

    <!----------------->
    <!--- PROJECTS 1 -->
    <!----------------->
    <section class="section-full">
        <div class="container-full">

            <div class="portfolio logo" data-toggle="modal" data-target="#modalProject-1" id="project-1">
                <div class="portfolio-wrapper">             
                    <img src="img/portfolio/logo/5.jpg"/>
                </div>
            </div>              

        </div>
    </section>


    <!------------------->
    <!-------- MODAL 1 -->
    <!------------------->

    <!-- Modal Project Template -->
    <div class="modal fade" id="modalProject-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
               <!--modal body-->
               <div class="modal-body">
                   <div class="container-fluid">
                       <div class="row">

                           <!--modal image-->
                           <div class="col-sm-6">
                               <img id="modalImage1"/>
                               <img id="modalImage2"/>
                               <img id="modalImage3"/>
                           </div>
                           <!--modal text-->
                           <div class="col-sm-6">
                               <h2 id="modalTitle"></h2>
                               <p id="modalText"></p>
                           </div>

                      </div>
                  </div>
               </div><!--modal body-->
           </div><!--modal-content-->
        </div><!--modal-dialog-->
    </div>

    <!--------------------->
    <!-- modal project 1 --> 
    <!---------------------> 
    <script>
    $('#project-1').click(function(){
        function setModal(modalImage1, modalImage2, modalImage3, modalTitle, modalText){
            $('#modalImage1').attr('src','img/portfolio/logo/1.jpg');
            $('#modalImage2').attr('src','img/portfolio/logo/2.jpg');
            $('#modalImage3').attr('src','img/portfolio/logo/3.jpg');
            $('#modalTitle').text('some title');
            $('#modalText').text( 'some text' );
        };
    });
    </script>

Answer 1

打开模式时，您可以使用 jQuery(或 vanilla javascript)更改 DOM 的值。删除 <script>您放置在模态中的标签为您在打开事件中设置值的元素提供 id(或类)。要在 jQuery 中更改图像的 src，您可以使用 $('#ID-of-img').attr('src','path-here'); .要在 jQuery 中更改标题或段落(或其他)的文本，您可以使用 $('#ID-of-element').text('place text here'); .

在你的情况下，我会使用这样的东西。

        <div class="col-sm-6">
            <div class="spacer-sm hidden-sm-up"></div>
            <h2 id="modalTitleDef"></h2>
            <p><span id="modalText1Def"></span><br><br><span id="modalText2Def"></span></p>
            <br>
            <button type="button" class="btn btn-primary btn-md" data-dismiss="modal">Close Project</button>
        </div>
    </div>

</div>    

<!-- project1 = COPY ALL modalTemplate but CHANGE the images and text-->   
<script>   

    function setModal(modalImage1Def, modalImage2Def, modalImage3Def, modalTitle, modalText1, modalText2){
        $('#modalImage1Def').attr('src',modalImage1Def);
        $('#modalImage2Def').attr('src',modalImage2Def);
        $('#modalImage3Def').attr('src',modalImage3Def);
        $('#modalTitleDef').text(modalTitle);
        $('#modalText1Def').text(modalText1);
        $('#modalText2Def').text(modalText2);
    }

</script>