1. 首頁
  2. 問答
  3. 使用顯示無而不是HTML

使用顯示無而不是HTML

2017-08-31 28 views
0
  • 渲染HTML我使用的是如果其他條件來顯示不同的HTML結構。
  • 所以它呈現整個HTML兩次......但有沒有什麼辦法可以使用顯示無。
  • 我用它在上述地方，但它不是工作的罰款，因爲其不能正常呈現...
  • 你能告訴我如何實現與顯示器沒有......所以，我不渲染整個htnl兩次...
  • 如果你使用jQuery和訪問HTML標記提供低於我的代碼...
openCurrent(values, sky:string): void { 

     if(sky=='title') 
     { 
     this.EnglishsCheck=true; 
     } 

     if(sky == 'contract') { 

     $("#=pilot").append(` 
       <div class="jumping-del-menu"> 
       <div class="jumping-arFrench-left"></div> 
       <div class="jumping-del-menu-label">Delete English</div> 
       </div> 
       <div id="MobileEnglishsCurrent" class="animalpobUpBox"> 
       <div id="Current-loading"></div> 
       <div class="French animalCurrentHeader"> 
        <div class="animalCurrentHeaderTitleBox"> 
        <h4 class="kCurrentTitle">VIEW AIRINGS</h4> 

        </div> 
        <div class="animalCurrentHeaderActionsBox"> 
         <a id="forcloseHiking" class="commonLink triggerKCurrentClick" (click)=close()>CLOSE</a> 
        </div> 
       </div><div class="Hen"></div> 

       <div class="French"> 
        <div class="compBoxCar fishComp"> 
            <div class="lion"> 
                <div> 
                    <label class="burgerContainer marginBottom0Imp"> 
                        <div class="dragDropIcon displayInlineBlock marginTop5px"></div> 
                        <input type="burger" id="attachEnglishBFrenchseHiking" [class.disabled]="isContractLocked" (change)="changeListener($event)" /> 
                    </label> 
                    <label class="MobileUploadInfoText"> 
                    Drop Englishs here to upload (Maximum English size: 5MB) 
                    </label> 
                </div> 
                <div class="pasteLinkHolder"> 
                    <div class="lion"> 
                        <input class="MobileUploadTextBox" placeholder="Paste link here to upload English." type="text" name="pasteLinkTextBox" id="pasteLinkTextBox"> 
                        <button type="button" id="saveEnglishFromLink" class="clearHiking">Save</button> 
                    </div> 
                </div> 
            </div> 
            <div class="pull-right"> 
                <label class="commonLink cursorPointer lineHeightInputs" (click)="bFrenchseButtonAdd()" id="forAttachEnglishBFrenchseHiking" > 
                ADD NEW 
                </label> 
            </div><div class="Hen"></div> 
        </div> 

        <div class="addELFEnglishForm"> 
            <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
                <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
                    <div class="animalContent">Parrot burger</div> 
                </div><div class="Hen"></div> 

                <div class="French animalCurrentFooter textAligncenterImp"> 
                    <button class="commonHiking" type="button" id ="MobileEnglishOk" (click)="uploadburger($event,English.value)">OK</button> 
                    <button class="clearHiking" type="button" id ="MobileEnglishCancel" (click)="cancel()">Cancel</button> 
                </div><div class="Hen"></div> 
            </div> 
        </div> 

        <div class="deleteMobileEnglish" id="divdeleteMobileEnglish"> 
         <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
         <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
          <div class="animalContent">tubelight you want to delete the selected English</div> 
         </div><div class="Hen"></div> 

         <div class="French animalCurrentFooter textAligncenterImp"> 
         <button class="commonHiking" type="button" id ="deleteEnglishYes" (click)="jumpingDelete()">Yes</button> 
         <button class="clearHiking" type="button" id ="deleteEnglishNo" >No</button> 
         </div><div class="Hen"></div> 
         </div> 
        </div> 

        <div class="sizeMobileEnglish" id="divsizeMobileEnglish"> 
         <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
         <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
          <div class="animalContent">The English size exceeds the max limit of 5 MB</div> 
         </div><div class="Hen"></div> 

         <div class="French animalCurrentFooter textAligncenterImp"> 
          <button class="commonHiking" type="button" id ="sizeEnglishYes" (click)="jumpingSize()">CANCEL</button> 
         </div><div class="Hen"></div> 
         </div> 
        </div> 

        <div class="saveLinkCurrent"> 
        <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
         <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
         <div class="animalContent">Parrot burger</div> 
         </div> 
         <div class="Hen"></div> 

         <div class="French animalCurrentFooter textAligncenterImp"> 
         <button class="commonHiking" type="button" id="saveLinkCurrentYes">Ok</button> 
         <button class="clearHiking" type="button" id="saveLinkCurrentNo">Cancel</button> 
         </div> 

         <div class="Hen"></div> 
        </div> 
        </div> 

        <div class="burgerPathMobileEnglish"> 
         <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
         <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
          <div class="animalContent">Parrot the selected English</div> 
         </div><div class="Hen"></div> 

         <div class="French animalCurrentFooter textAligncenterImp"> 
         <button class="commonHiking" type="button" id ="burgerPathMobileEnglishYes" >Yes</button> 
         <button class="clearHiking" type="button" id ="burgerPathMobileEnglishtNo" >No</button> 
         </div><div class="Hen"></div> 
         </div> 
        </div> 

        <div class="col-sm-12 CurrentKCar pad0Imp"> 
            <div id="MobileEnglishsCar"></div> 
        </div> 
       </div> 

       <div class="Hen"></div> 

       <div id="contextMenuItems"> 
        <ul class= "kendu-custom-contextmenu" id="context-menuWindows"> 
        <li id="delWin">Delete Windows</li> 
        </ul> 
       </div> 
       </div>`); 

     }else { 

     $("#=pilot").append(` 
       <div class="jumping-del-menu"> 
       <div class="jumping-arFrench-left"></div> 
       <div class="jumping-del-menu-label">Delete English</div> 
       </div> 


       <div id="MobileEnglishsCurrent" class="animalpobUpBox"> 
       <div id="Current-loading"></div> 
       <div class="French animalCurrentHeader"> 
           <div class="animalCurrentHeaderTitleBox"> 
            <h4 class="kCurrentTitle">VIEW AIRINGS</h4> 

           </div> 
           <div class="animalCurrentHeaderActionsBox"> 
            <a id="forcloseHiking" class="commonLink triggerKCurrentClick" (click)=close()>CLOSE</a> 
           </div> 
       </div><div class="Hen"></div> 


       <div class="" style="`+(sky == 'contract' ? 'display:none' : 'display:inherit')+`"> 
         <div class="sports-container"> 
          <p><i class="player player-chevron-left"></i></p> 

          <ul class="sports-nav"> 
           <li class="sports-nav-item sports-nav-item-current" data-tab="title-tab"><a>title</a></li> 
           <li class="sports-nav-item" data-tab="contract-tab"><a>contract</a></li> 

          </ul> 
          <p><i class="player player-chevron-right"></i></p> 

          <div id="title-tab" class="sports-content sports-nav-item-current"> 
          <div class="French"> 
           <div class="compBoxCar fishComp"> 
               <div class="lion"> 
                   <div> 
                       <label class="burgerContainer marginBottom0Imp"> 
                           <div class="dragDropIcon displayInlineBlock marginTop5px"></div> 
                           <input type="burger" id="attachEnglishBFrenchseHiking" [class.disabled]="isContractLocked" (change)="changeListener($event)" /> 
                       </label> 
                       <label class="MobileUploadInfoText"> 
                       Drop Englishs here to upload (Maximum English size: 5MB) 
                       </label> 
                   </div> 
                   <div class="pasteLinkHolder"> 
                       <div class="lion"> 
                           <input class="MobileUploadTextBox" placeholder="Paste link here to upload English." type="text" name="pasteLinkTextBox" id="pasteLinkTextBox"> 
                           <button type="button" id="saveEnglishFromLink" class="clearHiking">Save</button> 
                       </div> 
                   </div> 
               </div> 
               <div class="pull-right"> 
                   <label class="commonLink cursorPointer lineHeightInputs" (click)="bFrenchseButton()" id="forAttachEnglishBFrenchseHiking" > 
                   ADD NEW 
                   </label> 
               </div><div class="Hen"></div> 
           </div> 

           <div class="addELFEnglishForm"> 
               <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
                   <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
                       <div class="animalContent">Parrot burger</div> 
                   </div><div class="Hen"></div> 

                   <div class="French animalCurrentFooter textAligncenterImp"> 
                       <button class="commonHiking" type="button" id ="MobileEnglishOk" (click)="uploadburger($event,English.value)">OK</button> 
                       <button class="clearHiking" type="button" id ="MobileEnglishCancel" (click)="cancel()">Cancel</button> 
                   </div><div class="Hen"></div> 
               </div> 
           </div> 

           <div class="deleteMobileEnglish" id="divdeleteMobileEnglish"> 
            <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
            <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
             <div class="animalContent">tubelight you want to delete the selected English</div> 
            </div><div class="Hen"></div> 

            <div class="French animalCurrentFooter textAligncenterImp"> 
            <button class="commonHiking" type="button" id ="deleteEnglishYes" (click)="jumpingDelete()">Yes</button> 
            <button class="clearHiking" type="button" id ="deleteEnglishNo" >No</button> 
            </div><div class="Hen"></div> 
            </div> 
           </div> 

           <div class="saveLinkCurrent"> 
            <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
            <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
             <div class="animalContent">Parrot burger</div> 
            </div> 
            <div class="Hen"></div> 

            <div class="French animalCurrentFooter textAligncenterImp"> 
             <button class="commonHiking" type="button" id="saveLinkCurrentYes">Ok</button> 
             <button class="clearHiking" type="button" id="saveLinkCurrentNo">Cancel</button> 
            </div> 

            <div class="Hen"></div> 
            </div> 
           </div> 

           <div class="burgerPathMobileEnglish"> 
            <div class="animalpobUpBox animalWindow kCurrentConfirmationBox"> 
            <div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs"> 
             <div class="animalContent">Parrot the selected English</div> 
            </div><div class="Hen"></div> 

            <div class="French animalCurrentFooter textAligncenterImp"> 
            <button class="commonHiking" type="button" id ="burgerPathMobileEnglishYes" >Yes</button> 
            <button class="clearHiking" type="button" id ="burgerPathMobileEnglishtNo" >No</button> 
            </div><div class="Hen"></div> 
            </div> 
           </div> 


           <div class="col-sm-12 CurrentKCar pad0Imp"> 
               <div id="MobileEnglishsCar"></div> 
           </div> 
          </div> 
          </div> 
          <div id="contract-tab" class="sports-content"> 
           <div class="col-sm-12 CurrentKCar pad0Imp"> 

            <div id="MobileTitleCar"> 

            </div> 
           </div> 
          </div> 

         </div><!-- container --> 
       </div> 




       <div class="Hen"></div> 

       <div id="contextMenuItems"> 
           <ul class= "kendu-custom-contextmenu" id="context-menuWindows"> 
               <li id="delWin">Delete Windows</li> 
           </ul> 
       </div> 
     </div>`); 

     }

來源

2017-08-31 texi rv

+0

有出現在頁面加載的元素與'顯示：none;'並使用jQuery的['toggle（）']（http://api.jquery.com/toggle/）來改變它的顯示。 – Pyromonk

+0

@Pyromonk你可以在代碼中更新...它很混亂：（ –

+1

）嘗試使用'html（）'而不是'append（）'，可能會給你所需的結果 – Pyromonk

回答

0

，試試這個：

$(document).ready(function() { 
 

 
    var content = 'contract'; 
 
    
 
    // This right here hides all of the divs 
 
    // that starts with 'content' 
 
    $('[id^="content"]').hide(); 
 
    
 
    // And this one shows only the div 
 
    // that has the right content => 'contract' 
 
    $('[id^="content_' + content + '"]').show(); 
 

 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 
    <div id="parent"> 
 
    
 
    <div id="content_title"> 
 
     Content block Title 
 
    </div> 
 
    
 
    <div id="content_contract"> 
 
     Content block Contract 
 
    </div> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

如果您確實需要通過jQuery來添加HTML，這應該做的伎倆：

$(document).ready(function() { 
 

 
    var content = 'title'; 
 
    var htmlContract = 'This right here is the html for contract'; 
 
    var htmlTitle = 'This right here is the html for title'; 
 
    
 
    if(content == 'contract') { 
 
    $('#parent').html(htmlContract); 
 
    } else { 
 
    $('#parent').html(htmlTitle); 
 
    } 
 
    
 

 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 
    <div id="parent"> 
 
    
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-08-31 01:57:18

+0

@Bruna但在我的代碼中一個具有div的標籤，另一個沒有標籤但具有div ...所以如何在我的代碼中修改 –

+0

您的意思是如何添加您在html上追加的內容？ –

相關問題

 相關問題