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());
    }); 
});

默认情况下，页面设置为＆＃34; ALL＆＃34;加载时，但你可以看到我试图让动态文本在.currentFilter范围内工作

非常感谢任何帮助。

Answer 1

如果您只想要文字，则text()和get使用set方法。此外，您不想替换该元素，否则将无法再次找到该元素

尝试

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

Answer 2

您不需要使用点击的<a>元素替换元素（除非您真的想要），您需要做的就是更新文本：

$(document).ready(function () {
    $(".workFilterButtons a").click(function () {

        // selecting the element with the class
        // of 'currentFilter', and setting its
        // text (using the text() method) to
        // the textContent of the clicked <a>
        // element:
        $(".currentFilter").text(this.textContent);
    });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"></div>

＆＃13;

JS Fiddle demo

顺便提一下，原始代码无法正常工作，无法工作的原因是因为这一行：

$(".currentFilter").replaceWith($(this).append());

这用已点击的<a>元素替换了所选元素，这意味着将来，没有.currentFilter元素可以替换或更新。

另一方面，如果您想要将单击的<a>元素放入.currentFilter span-element，那么您可以尝试以下方法：

$(document).ready(function () {

    $(".workFilterButtons a").click(function () {

        // finding those <li> elements whose text, when trimmed
        // (removing leading and trailing white-space) is equal
        // to an empty string (''):
        var emptyLi = $('.workFilterButtons').filter(function () {
            return $(this).text().trim() === '';
        }),

        // caching the '.currentFilter' element(s):
            currentFilter = $('.currentFilter'),

        // checking for those elements in the
        // currentFilter jQuery object that have
        // a descendant <a> element, and finding
        // length of that collection, and then
        // checking that it's greater than 0:
            hasA = currentFilter.has('a').length > 0;

        // appending the contents of the currentFilter
        // element into the found emptyLi element:
        emptyLi.append(currentFilter.contents());

        // if there are no <a> elements in the 
        // currentFilter element(s):
        if (!hasA) {

            // we replace the contents (textNode 'all')
            // with the clicked <a> element:
            currentFilter.contents().replaceWith(this);
        } else {
            // otherwise we append the clicked link to
            // the currentFilter; this works because
            // once we get to this stage the <a> element
            // if it exists has already been moved back
            // to the empty <li>, therefore we can't
            // use '.contents().replace()' because
            // there are no contents remaining by this point
            // (and yes, this was incredibly counter-intuitive
            // to me for quite a long time, which is why this
            // update took a while):
            currentFilter.append(this);
        }
    });
});

＆＃13;

$(document).ready(function() {
  $(".workFilterButtons a").click(function() {
    var emptyLi = $('.workFilterButtons').filter(function() {
        return $(this).text().trim() === '';
      }),
      currentFilter = $('.currentFilter'),
      hasA = currentFilter.has('a').length > 0;

    emptyLi.append(currentFilter.contents());

    if (!hasA) {
      currentFilter.contents().replaceWith(this);
    } else {
      currentFilter.append(this);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"></div>

＆＃13;

JS Fiddle demo

参考文献：

JavaScript的：
- Node.textContent。
- String.prototype.trim()。
jQuery的：
- append()。
- click()。
- contents()。
- filter()。
- has()。
- replaceWith()。
- text()。

Answer 3

我已将您的class="currentFilter"更改为id="currentFilter"，所以现在您不需要.each()来做您想做的事情，选择器只选择1个元素而不是数组1个元素。

同时使用replaceWith()更改text()，同时将append()替换为text()。

如果你想看到它的实际效果，那么这就是一个小提琴 https://jsfiddle.net/s6bpwycn/

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

3 个答案: