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

Check this fiddle

在下面这个函数中你的代码似乎是错误的。你的遗失/>

<强>之前

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

JQuery .html选择器，图像没有显示出来

3 个答案:

提示：