javascript - 基于所选链接的动态标题文本

Question

我设置了一个投资组合网站，我将我的投资组合设置为通过选择某些过滤器来随机播放。我想要做的是根据他们选择的过滤器设置一些标题文本。

问题是当我选择一个链接时，比方说广告，广告将显示为我的标题文本。但是，如果我选择其他东西，比如品牌，它不会改变，它会停留在广告上。

这是我的html

<div id="portfolio-filter-container">
            <h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
        </div>
        <ul id="portfolio-filter">
            <!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
            <li class="workFilterButtons"><a href="#all" title="all">All</a></li>
            <li class="workFilterButtons"><a href="#ad" title="advertising" rel="ad">Advertising</a></li>
            <li class="workFilterButtons"><a href="#brand" title="" rel="brand">Branding</a></li>
            <li class="workFilterButtons"><a href="#catalog" title="" rel="catalog">Catalog</a></li>
            <li class="workFilterButtons"><a href="#id" title="" rel="id">Corporate ID</a></li>
            <li class="workFilterButtons"><a href="#relations" title="" rel="relations">Consumer Relations</a></li>
            <li class="workFilterButtons"><a href="#incentive" title="" rel="incentive">Incentive/Loyalty</a></li>
            <li class="workFilterButtons"><a href="#packaging" title="" rel="packaging">Packaging</a></li>
            <li class="workFilterButtons"><a href="#launch" title="" rel="launch">Product Launch</a></li>
            <li class="workFilterButtons"><a href="#promo" title="" rel="promo">Promotion</a></li>
            <li class="workFilterButtons"><a href="#public" title="" rel="public">Public Relations</a></li>
            <li class="workFilterButtons"><a href="#sales" title="" rel="sales">Sales Support</a></li>
            <li class="workFilterButtons"><a href="#social" title="" rel="social">Social Media</a></li>
            <li class="workFilterButtons"><a href="#trade" title="" rel="trade">Tradeshows</a></li>
            <li class="workFilterButtons"><a href="#web" title="" rel="web">Web/Mobile</a></li>
            </ul>
    <div id="bottomWrapper">

这是我的脚本

$(document).ready(function(){
    $(".workFilterButtons a").click(function(){
        $(".currentFilter").replaceWith($(this).append());
    }); 
});

默认情况下，页面在加载时设置为“ALL”，但如您所见，我正在尝试让动态文本在 .currentFilter 范围内工作

如有任何帮助，我们将不胜感激。

Answer 1

如果您只需要文本，您可以使用text() 方法来get 和set。此外，您不想替换该元素，否则将不会再找到它，因为它不再存在

尝试

$(".workFilterButtons a").click(function(){
    $(".currentFilter").text($(this).text());
});