Question

jQuery('.rolly').hover( function() { 
  var colorclass = jQuery(this).attr('colorclass'); 
  var colorcolumn = jQuery(this).attr('colorcolumn'); 
  var selector = "#table-struct tr td:nth-child(" + colorcolumn + ")";
  jQuery(selector).toggleClass(colorclass); 
});

<img id="img1" class="rolly" title="Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png" alt="" width="150" height="150" />
<img class="rolly" title="bRT Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png" alt="" width="150" height="150" />
<img class="rolly" title="Biddr API" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png" alt="" width="150" height="150" />

<!-- Begin Table -->  

<div id="table-struct">
  <table class="table table-bordered table-right" style="margin-right: 70px;">
    <thead>

      <tr>
        <td>SIMPLE INTEGRATION:seamless
          setup process to get started</td>
        <td align="center">X</td>
        <td>X</td>
        <td>X</td>
      </tr>

    </thead>
    <tbody>

      <tr>
        <td>NO ADVERSE EFFECTS OF LATENCY:
          publishers can set the overall
          timeout threshold</td>
        <td>Across All Header
          Bidding Partners</td>
        <td>For The bRT
          Integration Only</td>
        <td>** Controlled by
          Publisher**</td>
      </tr>

      <tr>
        <td>HORIZONTAL INTEGRATION: unlike
          some integrations that will
          compete only for first look or
          cookie matching, we compete
          on every impression served</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>ACCOUNT MANAGEMENT: access to
          a technical &amp; operational
          resource to ensure rapid and
          effective support</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>ACCESS THE bRT MARKETPLACE:
          drive significantly more
          competition with access to
          bRT’s unparalleled proprietary
          programmatic and managed
          advertiser demand</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>BILL OFF PUBLISHER’S AD SERVER:
          ensures no risk of revenue
          loss, guaranteeing results
          yielded are purely incremental</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>MEDIATION: we optimize all
          partners to maximize
          competition and drive the
          highest CPM possible</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>EQUAL PLAYING FIELD: create
          parity and fairness for all
          demand partners competing
          at the same level</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>INCREASED OPERATIONAL
          EFFICIENCY: a publisher’s ops
          team does not need to worry
          about multiple integrations,
          managing discrepancies &amp; the
          adverse performance effects
          of working with multiple
          header providers</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

    </tbody>
  </table>
</div>

我在WordPress帖子中这样做因此，当鼠标悬停在特定图像上并使用jquery更改列的颜色时，我会尝试选择完整列。因此，当我将鼠标悬停在第一张图像上时，它会将第二列变为红色，当我将鼠标悬停在第二列时，它会变为绿色，依此类推。有什么建议？我有类'rolly'的图像，并编写了一些jQuery逻辑。我不确定在应用它时逻辑是否有意义。到目前为止，我有点不成功。

Answer 1

Class .rolly没有属性＆＃39; colorclass＆＃39;。实际上，您要做的是识别列，那么为什么不将表数据标记为？像这样：

<tr>
<td class="col-1">NO ADVERSE EFFECTS OF LATENCY:
publishers can set the overall
timeout threshold</td>
<td class="col-2">Across All Header
Bidding Partners</td>
<td class="col-3">For The bRT
Integration Only</td>
<td class="col-4">** Controlled by
Publisher**</td>
</tr>

然后让您的脚本在翻转和图像时更改特定列类的背景？像这样：

<script type="text/javascript">
$(document).ready(function(){
    $("#img1").hover(function(){
        $(".col-2").css('background-color', 'red');
    }, function() {
        $(".col-2").css('background-color', 'white');
    });
    $("#img2").hover(function(){
        $(".col-3").css('background-color', 'red');
    }, function() {
        $(".col-3").css('background-color', 'white');
    });
    $("#img3").hover(function(){
        $(".col-4").css('background-color', 'red');
    }, function() {
        $(".col-4").css('background-color', 'white');
    });
});

Answer 2

具有'.rolly'类的图像没有'colorcolumn'和'colorclass'属性。

所以你需要将它们添加到图像中，如下所示。

<?php
$YearNow=Date('Y');
include('../connection/connect.php');
$result = $db->prepare("SELECT * FROM studentvotes,student where student.idno = studentvotes.idno");
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
    ?>
        <tr class="record" style="text-align:center;">
        <td><?php echo $row['idno']; ?></td>
        <td><?php echo $row['candid']; ?></td>
        </tr>
    <?php
}
?>

您创建的jQuery代码将起作用。根据上面的代码snippt，你需要添加如下的颜色样式类。

<img id="img1" class="rolly" title="Biddr" colorcolumn="1" colorclass="red" onmouseove .... >
<img class="rolly" title="bRT Biddr" colorcolumn="2" colorclass="blue"  onouseover.....>
<img class="rolly" title="Biddr API" colorcolumn="3" colorclass="green"  on....>

您可以根据需要修改颜色值。

如何在表jQuery中选择和操作列

2 个答案: