Question

我有一张桌子：

<table>
  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>

  <tr class="row">
    <td>
        Click me! 
        <span class="expand" style="display: none;">Hidden text</span>
    </td>
  </tr>
</table>

这个想法是可以单击每一行，单击该行将显示单元格中的隐藏跨度。这是我一直在尝试的jQuery：

$("#row").click(function () {
    $(this).class(".expand").style = "";
});

我正在使用$（this），因为同一个类中有很多spans，我只想扩展所点击行中的范围。

Answer 1

$(".row").click(function () {
    $(this).find("span.expand").show(); //Shows specific span for each row
});

注意：#row错误，因为row是一个类。使用.row

Answer 2

这应该可以解决你的问题：

jQuery的：

$('.row').click(function(){
    $(this).find('span').show();
});

*请注意，每一行都有一个'row'类，所以元素是'.row'而不是'#row'（这将引用'row'的ID）

Answer 3

使用.css()通过jQuery设置样式

$(".row").click(function () {
    $(this).find(".expand").css('color','red');
    //to show use
    $(this).find(".expand").show();
});

.find()

同时阅读

css with jQuery

Answer 4

使用此代码...

$('.row').click(function(){      // row is class not id
     $(this).find('span').show();
});

如果要切换显示（隐藏时显示并在显示时隐藏），请使用..

$('.row').click(function(){      // row is class not id
     $(this).find('span').toggle();
});

jQuery - 在单击的div中更改span的CSS

4 个答案: