javascript - 如果值等于 anchor 的文本，则更改其 CSS

Question

fiddle 1 = http://liveweave.com/gG4EHH
fiddle 2 = http://jsbin.com/zequyilo/1/edit

我有一组 anchor ，单击它们可以更改选定元素的 CSS(在本例中为 font-family 属性)

我想做的是在文本框中输入字体，如果该字体是 anchor 列表中的字体之一，则根据文本更改它的 css。

我想使用类似这样的方法，如果输入值等于 anchor 的文本来更改它的CSS，但不完全确定如何进行。

$('.grab-font-family').on('keyup change', function() {
  $('.grab-typography a').css('backgroundColor', '#444');
  if ( $('.grab-typography a').text() === $(this).val() ) {
     $(this).css('backgroundColor', '#1c1c1c');
  }
});

我使用 title 属性尝试了此方法，但是当我尝试 arial black 或 andale mono 时， anchor 具有该标题。它的背景没有改变。

$('.grab-font-family').on('keyup change', function() {
  $('.grab-typography a').css('backgroundColor', '#444');
  $(".grab-typography a[title=" + $(this).val() + "]").css('backgroundColor', '#1c1c1c');
});

所以我尝试使用包含选择器。如果我在文本框中输入 a，此方法将更改以 a 开头的所有 anchor 的背景颜色。

$('.grab-font-family').on('keyup change', function() {
  $('.grab-typography a').css('backgroundColor', '#444');
  $(".grab-typography a:contains(" + $(this).val() + ")").css('backgroundColor', '#1c1c1c');
});

Answer 1

filter() 是最可控的方式。您的第一种方法只是拉取集合中第一个元素的 text() 。当集合中有多个元素时，这对于所有 getter 都是相同的。

filter() 将循环遍历所有元素并让您运行更多涉及的条件

确保引用包含空格的字体，否则浏览器会误解它们

$('.grab-font-family').on('keyup change', function() {
  var font=this.value;
  $('.grab-typography a').filter(function(){
     return this.title === font;/* return ones that match font */
  }).css('font-family', '"'+font+'"'});
})