jQuery -返回彩色超链接

Question

我试图返回彩色超链接，但它一直失败。

所以我基本上有一个庞大的超链接列表，其中一些最终得到了红色的颜色样式。我正在尝试通过一个按钮来列出当前时间哪些是红色的。我一直没有得到任何结果。

HTML代码：

<tr id="List" style="display: none;">
  <td>General
    <hr><a class="toggle-vis" data-column="0">#</a> -
    <a class="toggle-vis" data-column="1">First Name</a> -
    <a class="toggle-vis" data-column="2" style="color: red;">Last Name</a> -
    <a class="toggle-vis" data-column="3" style="color: red;">Country</a>
  </td>
</tr>

<p><label><input type="checkbox" id="options"/> Show Red Options!</label></p>
<div class="print"></div>

jQuery代码：

$('#options').change(function () {
  var i = 0;
  while (i < 4) {
    var color = $('a[data-column=' + i + ']').css('color');
      if (color === 'rgb(255,0,0)') {
        $('#options').attr($('.print').text("Data-Column ID: " + i));
      } else {
        $('#options').attr($('.print').text("Boo!"));
      }
    i++;
  }
});

我试过两种颜色“红色”和RGB的。

下面是小提琴：https://jsfiddle.net/3ynph2wv/1/

Answer 1

两个问题：

spaces)

• display

1. 搜索合适的颜色rgb(255, 0, 0) (请注意正确地显示结果)

​

const print = $('.print');
print.html('');

$('#options').change(function() {
  var i = 0;
  while (i < 4) {
    var color = $('a[data-column=' + i + ']').css('color');
    if (color === 'rgb(255, 0, 0)') {
      print.append(`Data-Column ID: ${i}<br>`);
    } else {
      print.append(`ID ${i} Boo!<br>`);
    }
    i++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr id="List" style="display: none;">
  <td>General
    <hr><a class="toggle-vis" data-column="0">#</a> -
    <a class="toggle-vis" data-column="1">First Name</a> -
    <a class="toggle-vis" data-column="2" style="color: red;">Last Name</a> -
    <a class="toggle-vis" data-column="3" style="color: red;">Country</a>
  </td>
</tr>

<p><label><input type="checkbox" id="options"/> Show Red Options!</label></p>
<div class="print"></div>

​

Answer 2

你可以用下面的方法来做。这是更好的方法，下面的方法是循环使用切换-vis类的链接。

$('#options').change(function () {
  var textToPrint = '';

  $('.toggle-vis').each(function(){
    if($(this).css('color') == 'rgb(255, 0, 0)'){
       textToPrint += $(this).text()+', '; 
    }

    $('.print').html(textToPrint.slice(0, -2));     // slice function is for removing the comma at the end.
  });
});

Answer 3

下面是你如何做到这一点的一个例子。这样做的目的是使用attr方法，看看它是否具有设置颜色的样式。

​

$('#options').change(function () {
  var i = 0;
  while (i < 4) {
    var element = $('a[data-column=' + i + ']');
    var style = element.attr('style')
    if(style) {
    	if (style.indexOf('red') != -1) {
        $('.print').html($('.print').html() + " Data-Column ID: " + i + '<br>');
      } 
    } else {
        $('.print').html($('.print').html() + " Boo! ID: " + i + "<br>");
    }
    i++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr id="List" style="display: none;">
  <td>General
    <hr><a class="toggle-vis" data-column="0">#</a> -
    <a class="toggle-vis" data-column="1">First Name</a> -
    <a class="toggle-vis" data-column="2" style="color: red;">Last Name</a> -
    <a class="toggle-vis" data-column="3" style="color: red;">Country</a>
  </td>
</tr>


<p><label><input type="checkbox" id="options"/> Show Red Options!</label></p>
<div class="print"></div>

​