jQuery .html選擇器，圖像未顯示

Question

我正在嘗試創建一個導航欄，當單擊該導航欄時，它會更改div的HTML。 我正在將Jquery與.html選擇器一起使用，並且可以很好地處理文本。 但是，當我嘗試將圖像放入更改后的文本中時，我的所有腳本均停止工作。 在代碼段中，它可以工作，但是圖像不顯示。 任何幫助/建議將不勝感激。

 $(document).ready(function(){ $("#person").click(function(){ $("#replacement").html("<h1> About K</h1><p>I like burritos</p>."); }); }); $(document).ready(function(){ $("#developer").click(function(){ $("#replacement").html("<h1> Development</h1><p>I like development and art!</p>."); }); }); $(document).ready(function(){ $("#translator").click(function(){ $("#replacement").html("<h1> Translation</h1><p>I like translating</p>."); }); }); $(document).ready(function(){ $("#designer").click(function(){ $("#replacement").html("<h1> Design</h1><p>I like development and art!</p>."); }); }); $(document).ready(function(){ $("#person").click(function(){ $("#software").html("<h1> Base Skills</h1>."); }); }); $(document).ready(function(){ $("#translator").click(function(){ $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'>"); }); }); $(document).ready(function(){ $("#designer").click(function(){ $("#software").html("<h1> Development Design Skills</h1>."); }); }); $(document).ready(function(){ $("#developer").click(function(){ $("#software").html("<h1> Development Skills</h1>."); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info"> <button type="button" class="btn btn-default" id="person">Person</button> <button type="button" class="btn btn-warning" id="developer">Developer</button> <button type="button" class="btn btn-info" id="designer">Designer</button> <button type="button" class="btn btn-success" id="translator">Translator</button> </div> <div id="replacement"> <article class="aboutText"><h1>ABOUT ME</h1> <p> Text</p></article> </div> <div id="software"> <article class="aboutText"><h1>Base Skills</h1> <p> Text</p></article> </div> 

Answer 1

您沒有關閉img標簽

$(document).ready(function(){
    $("#translator").click(function(){
        $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'"); // >
    });
});

提示：

• 您不需要所有這些$(document).ready() 。 將所有點擊事件整合到一個事件中
• 通過將$("#software")和$("#replacement")分配給變量以節省一些內存來對其進行緩存
• 不用每次單擊按鈕都替換內容，而是使用選項卡並在它們之間切換。

 $(document).ready(function(){ $("#person").click(function(){ $("#replacement").html("<h1> About K</h1><p>I like burritos</p>."); }); $("#developer").click(function(){ $("#replacement").html("<h1> Development</h1><p>I like development and art!</p>."); }); $("#translator").click(function(){ $("#replacement").html("<h1> Translation</h1><p>I like translating</p>."); }); $("#designer").click(function(){ $("#replacement").html("<h1> Design</h1><p>I like development and art!</p>."); }); $("#person").click(function(){ $("#software").html("<h1> Base Skills</h1>."); }); $("#translator").click(function(){ $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'>"); }); $("#designer").click(function(){ $("#software").html("<h1> Development Design Skills</h1>."); }); $("#developer").click(function(){ $("#software").html("<h1> Development Skills</h1>."); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info"> <button type="button" class="btn btn-default" id="person">Person</button> <button type="button" class="btn btn-warning" id="developer">Developer</button> <button type="button" class="btn btn-info" id="designer">Designer</button> <button type="button" class="btn btn-success" id="translator">Translator</button> </div> <div id="replacement"> <article class="aboutText"><h1>ABOUT ME</h1> <p> Text</p></article> </div> <div id="software"> <article class="aboutText"><h1>Base Skills</h1> <p> Text</p></article> </div> 

Answer 2

檢查這個小提琴

在下面的函數中，您的代碼似乎是錯誤的。 你想念/>

之前

$(document).ready(function(){
    $("#translator").click(function(){
        $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'>");
    });
});

之后（工作代碼）

$(document).ready(function(){
    $("#translator").click(function(){
        $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'/>");
    });
});

Answer 3

您需要像這樣關閉img標簽：

  $(document).ready(function(){
    $("#translator").click(function(){
        $("#software").html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'/>");
    });

不知道為什么要在每個函數之前使用$(document).ready(function(){ 。您可以在腳本開始時使用它，然后將其他所有內容包裝在其中...最后關閉它。看起來更好

還將#software和$("#replacement")分配給變量

 $(document).ready(function(){ var repl = $("#replacement") soft = $("#software") $("#person").click(function(){ $(repl).html("<h1> About K</h1><p>I like burritos</p>."); }); $("#developer").click(function(){ $(repl).html("<h1> Development</h1><p>I like development and art!</p>."); }); $("#translator").click(function(){ $(repl).html("<h1> Translation</h1><p>I like translating</p>."); }); $("#designer").click(function(){ $(repl).html("<h1> Design</h1><p>I like development and art!</p>."); }); $("#person").click(function(){ $(soft).html("<h1> Base Skills</h1>."); }); $("#translator").click(function(){ $(soft).html("<img class='softIcon' src='http://blog.lionbridge.com/translation/files/2013/11/Orange-Translate-Button.jpg'/>"); }); $("#designer").click(function(){ $(soft).html("<h1> Development Design Skills</h1>."); }); $("#developer").click(function(){ $(soft).html("<h1> Development Skills</h1>."); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info"> <button type="button" class="btn btn-default" id="person">Person</button> <button type="button" class="btn btn-warning" id="developer">Developer</button> <button type="button" class="btn btn-info" id="designer">Designer</button> <button type="button" class="btn btn-success" id="translator">Translator</button> </div> <div id="replacement"> <article class="aboutText"><h1>ABOUT ME</h1> <p> Text</p></article> </div> <div id="software"> <article class="aboutText"><h1>Base Skills</h1> <p> Text</p></article> </div>