为什么我的 HTML 替换分配不起作用？答案

【问题标题】：Why is my HTML replacement assignation not working?为什么我的 HTML 替换分配不起作用？
【发布时间】：2015-03-27 04:23:46
【问题描述】：

进行选择时，我想将当前内容替换为其他内容。当从下拉列表中选择“Tom Sawyer”时，我正在尝试替换（现在），从先前的选择更改为“Tom Sawyer 将稍后添加”。但它不起作用 - 现有的 HTML (HuckFinn) 保留在 div 中。以下是相关代码：

$('#fictionDropDown').change(function () {
    configLoading();
    var sel = this.value;
    if ((sel == "HuckFinn") && (currentFictionSelection != "HuckFinn")) {
        $('#FictionContent').load('Content/HuckFinn.html');
        currentFictionSelection = "HuckFinn";
    }
    else if ((sel == "TomSawyer") && (currentFictionSelection != "TomSawyer")) {
        $("#FictionContent").empty();
        $('#FictionContent').html('Tom Sawyer will be added later');
        currentFictionSelection = "TomSawyer";
    }

...和 HTML：

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Fiction">Fiction</a></li>
        <li><a href="#tab-Nonfiction">Nonfiction</a></li>
        <li><a href="#tab-MiscTwain">Miscellaneous</a></li>
        <li><a href="#tab-Media">Media</a></li>
    </ul>
    <div id="tab-Fiction">
        <select id="fictionDropDown">
            <option value="HuckFinn">Huck Finn</option>
            <option value="TomSawyer">Tom Sawyer</option>
            <option value="tPatP">Prince and the Pauper</option>
            <option value="ConnYank">Connecticut Yankee</option>
            <option value="Gilded">The Gilded Age</option>
            <option value="Puddnhead">Pudd'nhead Wilson</option>
            <option value="ShortStories">Short Stories</option>
        </select>
        <div id="FictionContent" class="clearfix">Content in Fiction tab</div>
    </div>

如果有调试此代码的方法会有所帮助。我在代码中有断点，但没有一个被命中。

无论如何，为什么清空html然后将其设置为“Tom Sawyer will be added later”不起作用？

【问题讨论】：

其他原因导致了该错误。我复制了你在这里的内容（没有 configLoading() 和 currentFictionSelection），它对我来说效果很好。问题不在于 empty() 或 html()，我认为这可能与 currentFictionSelection 有关。当您选择“Tom Sawyer”时，您是否有 Firebug（或类似的东西）来检查 JS 控制台？还有……为什么要使用 currentFictionSelection？只有当用户选择不同的选项时，才应该运行更改功能。
这里对我来说工作正常：jsfiddle 虽然我必须删除configLoadin()，因为它在示例中不存在并定义currentFictionSelection。我假设它通常在代码的前面定义？
你必须在change函数上方定义var currentFictionSelection = '';。

标签： jquery html visual-studio-2013 asp.net-webpages

【解决方案1】：

用一个值初始化 currentFictionSelection，现在一切正常：

var currentFictionSelection = 'somevalue';

$('#fictionDropDown').change(function () {
    //configLoading();
    var sel = this.value;
    if ((sel == "HuckFinn") && (currentFictionSelection != "HuckFinn")) {
        alert('foo');
        $('#FictionContent').load('Content/HuckFinn.html');
        currentFictionSelection = "HuckFinn";
    } else if ((sel == "TomSawyer") && (currentFictionSelection != "TomSawyer")) {
        alert('bar');
        $("#FictionContent").empty();
        $('#FictionContent').html('Tom Sawyer will be added later');
        currentFictionSelection = "TomSawyer";
    }
});

演示：http://jsfiddle.net/BenjaminRay/u8rz59Lm/

【讨论】：