Question

我有一个问题，想弄清楚如何编写这个，我是JS / jQuery的新手，所以对我很轻松！

我想获得选中的单选按钮的ID，我已经完成了。然后我想找到一个具有匹配数据属性的表行<tr>并向其添加一个类。我的问题是试图找到数据属性的值导致TR返回未定义，因为有多个数据属性，所以我不能这样做：

if (dataAttribute = radioSelect) {
    $(this).addClass("test");
}

基本上我的问题是多个表行，而不知道如何将它们单独输出。

以下是我的代码的一个粗略示例：

https://jsfiddle.net/2dsvrhjo/1/

非常感谢任何帮助。

Answer 1

您可以按照以下数据属性进行选择：

＆＃13;

$('input[type="radio"]').change(function () {
    // Get Choice for Application
    var application = $('input[name="application"]:checked').prop('id') || '';
  
    // Get all tr's with the selected data-app
    var $trs = $('tr[data-app="'+application+'"]');
  
    // Add your class
    $trs.addClass('highlight');
  
    // Remove the class from all other tr's
    $('tr').not($trs).removeClass('highlight');
});

＆＃13;

.highlight {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" id="Aviation" name="application" />Aviation<br>
  <input type="radio" id="Civil" name="application" />Civil
</div>
<table border="1" style="text-align:center;">
  <tr>
    <th>Section One</th>
    <th>Section Two</th>
  </tr>
   <tr data-app="Aviation">
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr data-app="Civil">
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr data-app="Aviation">
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr data-app="Civil">
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

＆＃13;

Answer 2

这是一个简单的案例：

$('input[type="radio"]').on('change',function () {
        // Get Choice for Application
    var application = $(this).attr('id');
  $('table').find('tr').each(function(i){
      if ($(this).attr('data-app') == application){
        $(this).addClass('test');
      } else {
        $(this).removeClass('test');
      }

  });
});

只需使用上面的代码更新您的小提琴。

该代码循环遍历并检查匹配的数据应用程序

如何：如果数据属性等于无线电选择添加类

2 个答案: