Question

小提琴1 = http://liveweave.com/gG4EHH
小提琴2 = http://jsbin.com/zequyilo/1/edit

我有一组锚点，我单击以更改选定的元素CSS（在本例中为font-family属性）

我要做的是在文本框中键入字体，如果字体是锚列表中的字体之一，则根据文本更改它的css。

我想使用类似这样的方法，如果输入值等于锚的文本以改变它的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具有该标题的锚点时。它的背景没有改变。

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

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

$('.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()。当集合中有多个元素时，对于所有getters，这是相同的。

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+'"'});
})

如果Value等于Anchor的文本，则更改它的CSS

1 个答案: