如果Value等于Anchor's Text，则更改它的CSS

If Value is Equal to Anchor's Text then Change it's CSS

本文关键字：CSS Text 等于 Value Anchor 如果      更新时间：2023-09-26

提琴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');
});

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+'"'});
})
相关文章：