Table 行不能作为 jquery 请求的兄弟行

Question

是什么让某物成为 jquery 请求的兄弟？

我希望我的 table 的所有单元格中的内容充当我的 jquery 请求的兄弟姐妹。目前只有同一行中的 td 值充当彼此的兄弟姐妹。如果您愿意，下一行的 td 将充当不同的 "family"。

i.e <table> 
      <tr>
        <td> content here </td>
        <td> more content </td>
      </tr>
      <tr>
        <td> content here </td>
        <td> more content </td>
      </tr>
    </table>

     $("td").click(function () { 
        $(this).siblings().addClass('fadeClick');
        $(this).siblings().removeClass('noFade');
       }

完整代码见 jfiddle：https://jsfiddle.net/nsn3bpep/7/

（我希望两行中的所有框，除了 hovered/clicked 上的那个是半不透明的）

Answer 1

您需要 select 所有 td 元素并使用此集合而不是兄弟集合。像这样：

var $td = $("td");
$td.click(function () {
    $("#content").html($(this).find(".hover-content").html());
    $('img[class*="wp-image-"]').removeClass('myClickState');
    $(this).find('img[class*="wp-image-"]').addClass('myClickState');
    divContent = $("#content").html();
    $td.not(this).addClass('fadeClick').removeClass('noFade');
    $(this).removeClass('fadeClick');
});
$td.hover(function () {
    $("#content").html($(this).find(".hover-content").html());
    $(this).addClass('noFade');
    $td.not(this).removeClass('noFade').addClass('fade');
}, function () {
    $("#content").html(divContent);
    $td.not(this).removeClass('fade');
    $(this).removeClass('noFade');
});

演示： https://jsfiddle.net/nsn3bpep/8/

Table 行不能作为 jquery 请求的兄弟行

Table rows not working as siblings for jquery requests

html

javascript

jquery

html-table

siblings