Question

我有一个简单的标题，如果它与ID匹配，我想用城市名称填充。我目前正在使用replaceWith，它似乎只在第一次工作。不确定为什么？

这是功能：

function toggleDetails() {
    $(".pin").click(function() {
        var cityName =  $(this).attr('id');
        $(".city-details").toggle();

        if (cityName === 'Miami') {
            $('h3#cityName').replaceWith("Miami");
        }
        else if(cityName === 'Philadelphia') {
            $('h3#cityName').replaceWith("Philadelphia");
        }
        else if (cityName === 'Chicago') {
            $('h3#cityName').replaceWith("Chicago");
        }
        else if (cityName === 'Los-Angeles') {
            $('h3#cityName').replaceWith("Los Angeles");
        }
        else if (cityName === 'Houston') {
            $('h3#cityName').replaceWith("Houston");
        }
        else if (cityName === 'San-Diego'){
            $('h3#cityName').replaceWith("San Diego");
        }
        else if (cityName === 'Atlanta') {
            $('h3#cityName').replaceWith("Atlanta");
        }
        console.log(cityName);
    });
}

HTML：

<p class="pin totally newyork" id="NewYork">
    New York
</p>
<p class="pin barely boston" id="Boston">
    Boston
</p>
<p class="pin fairly philadelphia" id="Philadelphia">
    Philadelphia
</p>
<p class="pin barely chicago" id="Chicago">
    Chicago
</p>
<p class="pin barely la" id="Los-Angeles">
    Los Angeles
</p>
<p class="pin fairly houston" id="Houston">
    Houston
</p>

Answer 1

replaceWith将用新内容替换整个DOM元素。这意味着在第一次调用之后，DOM中不再存在'h3'，因此后续调用将找不到与$('h3#cityName')选择器匹配的元素来执行任何操作。

尝试.text("NewCityName")而不是replaceWith

Answer 2

您正在用文本替换整个元素，因此当您想再次替换时，该元素不再存在。

只需替换元素中的文本即可。例如：

 $('h3#cityName').text("Miami");

Answer 3

是否有一个带有id cityname的h3元素？它没有显示在您的代码中。如果有不同的此类元素，则需要使用

$('h3#' + cityName)

在任何情况下，replaceWith将“匹配元素集合中的每个元素与提供的新内容。”。在您的情况下，您可能想要设置目标元素的html（）或text（）。

$('h3#cityName').html("Chicago");

Answer 4

replaceWith将删除元素并将其替换为给定的文本，因此在第一次之后不再需要替换元素。尝试使用.text或.html。你的代码也似乎有点多余。

$(".pin").click(function() {
    $(".city-details").toggle();
    $('#cityName').text(this.id.replace(/-/g, ' '));
});

Fiddle

如果Id匹配，则替换它 - 不起作用

4 个答案: