javascript - 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>