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

时间:2012-12-04 13:55:54

标签: jquery

我有一个简单的标题,如果它与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 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

$('h3#' + cityName)

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

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

答案 3 :(得分:0)

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

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

Fiddle