javascript - 在 jquery 中突出显示相似的 rel 属性

Question

只是想知道是否有人知道解决这个问题，实际上我想突出显示与“a 链接”具有相似 rel 属性的“表格行”，我的意思是如果我单击包含 rel 属性值 = X 和然后包含 rel 属性值的表 tr 也将以红色突出显示，也是相反的

试一试，还没成功

在这里 fiddle >>

<div class="part-container">
 <div class="part-left">
  <div class="placeholder">
      <a href="#9505092011120026" title=" " alt=" " class="part_number_9505092011120026" rel="part_number_9505092011120026" style="top:73px;left:41px;">&nbsp;9505092011120026</a> 
      <a href="#1905092011120046" title=" " alt=" " class="part_number_1905092011120046" rel="part_number_1905092011120046" style="top:95px;left:77px;">&nbsp;1905092011120046</a> 
      <a href="#5305092011120107" title=" " alt=" " class="part_number_5305092011120107" rel="part_number_5305092011120107" style="top:07px;left:93px;">&nbsp;5305092011120107</a> 
      <a href="#1805092011120139" title=" " alt=" " class="part_number_1805092011120139" rel="part_number_1805092011120139" style="top:25px;left:85px;">&nbsp;1805092011120139</a> 
      <a href="#9805092011120157" title=" " alt=" " class="part_number_9805092011120157" rel="part_number_9805092011120157" style="top:79px;left:67px;">&nbsp;9805092011120157</a> 
      <a href="#405092011120246" title=" " alt=" " class="part_number_405092011120246" rel="part_number_405092011120246" style="top:19px;left:75px;">&nbsp;405092011120246</a> 
      <a href="#3505092011120325" title=" " alt=" " class="part_number_3505092011120325" rel="part_number_3505092011120325" style="top:85px;left:67px;">&nbsp;3505092011120325</a> 
      <a href="#1905092011120345" title=" " alt=" " class="part_number_1905092011120345" rel="part_number_1905092011120345" style="top:41px;left:21px;">&nbsp;1905092011120345</a> 
      <a href="#1005092011120419" title=" " alt=" " class="part_number_1005092011120419" rel="part_number_1005092011120419" style="top:39px;left:29px;">&nbsp;1005092011120419</a>  
  </div>
</div>

<div class="part-right">
 <div class="table-responsive" id="right-table">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Part Number</th>
                  <th>Deskripsi</th>
                  <th>Het</th>
                  <th>Cart</th>
                </tr>
              </thead>
              <tbody>
                <tr class="part_number" rel="part_number_9505092011120026">
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                </tr>
                <tr class="part_number">
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td>adipiscing</td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td>odio</td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td>cursus</td>
                </tr>
                <tr class="part_number">
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td>Sed</td>
                </tr>
                <tr class="part_number" rel="part_number_1905092011120046">
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td>sem</td>
                </tr>
                <tr class="part_number">
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td>imperdiet</td>
                </tr>
                <tr class="part_number">
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td>Praesent</td>
                </tr>
                <tr class="part_number" rel="part_number_5305092011120107">
                  <td >1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td>tellus</td>
                </tr>
                <tr class="part_number">
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td>porta</td>
                </tr>
                <tr class="part_number">
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td>lacinia</td>
                </tr>
                <tr class="part_number">
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td>Class</td>
                </tr>
                <tr class="part_number" rel="part_number_1805092011120139">
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td>ad</td>
                </tr>
                <tr class="part_number">
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td>conubia</td>
                </tr>
                <tr class="part_number" rel="part_number_9805092011120157">
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td>himenaeos</td>
                </tr>
                <tr class="part_number">
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td>in</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
       </div>

CSS:

.part-container { 
    width: 100%; 
    display: block;  
    height: 551px;
}
.part-left { 
    width: 61%; 
    float: left;  
}
.part-right { 
    width: 39%; 
    float: right;  
}
.red {
    background: red;
}

JS:

  $(".placeholder a").click(function(e){
    e.preventDefault();
    var same_rel ="."+$(this).attr("rel");  
     $("#right-table tbody tr.part_number").removeClass("red");
     $("#right-table tbody tr").find(same_rel).addClass("red");
});

Answer 1

除了@phillip100 和@Alvaro 让你需要覆盖 bootstrap 的 css 之外。

JS:

$(".placeholder a").click(function(e){
    e.preventDefault();
    var same_rel = $(this).attr("rel"); 
     $("#right-table tbody tr.part_number").removeClass("red");
     $('#right-table tbody tr[rel='+same_rel+']').addClass("red");
});

CSS:

...
#right-table .red {
  background-color: red;
}

工作 JS fiddle :http://jsfiddle.net/2v64myqa/19/