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要素を削除して指定されたテキストに置き換えるため、初回以降に置き換える要素はなくなります。.textまたはで試してください.html。また、コードも少し冗長に見えます。

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

フィドル

于 2012-12-04T14:05:27.050 に答える