Question

我有一个过滤器菜单，我把它放在一个表中，当点击其中一个链接时，另一个单独的表中的相应列将被隐藏，直到再次点击该链接。

<!-- Table for filter menu -->
    <table>
          <tr>
            <td>
              <a class="toggle-vis" data-column="1">hideColumn1</a> |
              <a class="toggle-vis" data-column="2">hideColumn2</a> |
              <a class="toggle-vis" data-column="3">hideColumn3</a>
            </td>
          </tr>
      <table>

<script>
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
        column.visible( ! column.visible() );
    } );=
</script>

我的目标是通过某种方式显示隐藏/显示哪些列，因此onClick，我希望链接文本变为粗体或更改颜色或其他任何内容。我需要在表格中循环吗？我不知道 - 对HTML非常新，所以任何帮助都会受到赞赏，并且getElementById似乎并不适合我。

Answer 1

您可以使用this来获取点击的元素，然后根据该元素修改其内联样式（或使用类）。

内联样式

<!-- Table for filter menu -->
<table>
  <tr>
    <td>
      <a class="toggle-vis" data-column="1">hideColumn1</a> |
      <a class="toggle-vis" data-column="2">hideColumn2</a> |
      <a class="toggle-vis" data-column="3">hideColumn3</a>
    </td>
  </tr>
<table>

<script>
  $('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();
    // ADDED CODE
    var element = $(this);
    if (element.css('font-weight') === 'bold') {
      element.css({
        'font-weight': 'normal'
      });
    } else {
      element.css({
        'font-weight': 'bold'
      });
    }
    // END OF ADDED CODE
    // Get the column API object
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
  } );=
</script>

类

使用课程，这更简单。将其添加到您的风格中：

.bold-link {
  font-weight: bold;
}

然后，只需使用此功能：

<script>
  $('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();
    // ADDED CODE
    var element = $(this);
    element.toggleClass('bold-link');
    // END OF ADDED CODE
    // Get the column API object
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
  } );=
</script>

Answer 2

您可以在最后点击的链接中添加一个类（并删除上一个类）在文件的开头。

<style>
.selected {
  font-weight: bold;
}
</style>

在功能

中

$('a.selected').removeClass('selected');
$(this).addClass('selected');

另外你为什么打电话给e.preventDefault()？当您点击链接而不执行任何操作时是否适用？另一种方法是为链接和href=""函数末尾的return false提供onclick属性。

如果列可见（不隐藏），则使链接变为粗体

2 个答案:

内联样式

类