0

我有一个简单的标题，如果它与 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>
4

4 回答 4

0

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

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

于 2012-12-04T14:01:31.590 回答
0

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

只需替换元素中的文本。例子：

 $('h3#cityName').text("Miami");
于 2012-12-04T14:01:44.797 回答
0

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

$('h3#' + cityName)

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

$('h3#cityName').html("Chicago");
于 2012-12-04T14:02:08.343 回答
0

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

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

小提琴

于 2012-12-04T14:05:27.050 回答