Question

我正在使用if else条件来显示不同的html结构。
所以它渲染了一个完整的HTML两次......但有没有办法可以使用display none。
我在上面的地方使用它，但由于它没有正确渲染而无法正常工作......
你能告诉我如何实现display none ...这样我就不会再渲染整个htnl了两次......
在下方提供我的代码......

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>`);

      }

Answer 1

如果您正在使用jQuery并且可以访问HTML标记，请尝试以下操作：

$(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>

使用display none而不是html渲染html

1 个答案: