为什么这个 JQuery 脚本不能修改选定元素的 CSS 设置？

Question

我对 jQuery 完全陌生，我正在疯狂地尝试修改一个在 DOM 上执行某些操作的脚本。

这是我的 jQuery 脚本：

$(document).ready(function () {
        $("thead.opening").click(function () {
            var tbodyElement =  $(this).next();

            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
            });

            tbodyElement.style.display = 'auto !important';
            return false;
        });
    });

这是它工作的 HTML 页面部分：

<table class="standard-table-cls table-header-cls">
        <thead class="opening active">
        <tr>
            <th>
                <img class="imgAccordion" src="img/arrow_down.gif"/>
                Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
            </th>
        </tr>
        </thead>

        <tbody class="expanded">
            <tr>
                <td style="width: 100em;">
                    SHOW SOMETHING
                </td>
            </tr>
        </tbody>
</table>

...........................................................
...........................................................
...........................................................


<table class="standard-table-cls table-header-cls">

    <thead class="opening">
        <tr>
            <th>
               <img class="imgAccordion" src="img/arrow.gif"/>
               Ricerca Fatture
            </th>
        </tr>
    </thead>

    <tbody class="expanded" style="display: none;">
        <tr>
            <td style="width: 100em;">
                 SHOW SOMETHING ELSE
            </td>
        </tr>
    </tbody>

<table>

正如您在我的代码中看到的那样，有 2 个不同的表都具有相同的类 (standard-table-cls table-header-cls)。

好的，所以 $("thead.opening").click 是具有 class="opening" 的被点击的 thead 元素，是对的还是我错过了什么？

好的，现在我想为与点击的 thead 元素相关的 tbody 元素设置一个特定的 CSS 值。

所以，正如您在前面的脚本中看到的，我添加了：

这一行应该选择与被点击的thead元素相关的tbody元素：

var tbodyElement =  $(this).next();

在脚本的最后我放了这一行来设置特定的 CSS 设置：

tbodyElement.style.display = 'auto !important';

问题是，这是执行的，但在生成的 HTML 中我没有：

display: auto; 预期的 CSS，但我仍然有：

<tbody class="expanded" style="display: block;">

这与在我的脚本中插入前 2 行之前获得的值相同。

为什么它不能工作？我错过了什么？如何修复此脚本以获得修改与点击的广告相关的 tbody 元素的显示值的所需行为？

Answer 1

因为tbodyElement是jQuery方法$(this).next()返回的jQuery对象，它没有style属性，在jQuery中是css()方法改变样式

tbodyElement.css('display', 'auto');

请注意，javascript 无法设置 !important 规则，但它确实会更改附加到元素的内联样式。

也不是there is no auto for the display style，如果你想为你做的元素使用默认值

tbodyElement.css('display', '');

假设显示样式未在另一个样式表中设置

Answer 2

使用 css() jquery obj。

        $(document).ready(function () {
            $("thead.opening").click(function () {
                var tbodyElement =  $(this).next();

                $(this).next().slideToggle('slow', function () {
                    $(this).prev("thead.opening").toggleClass("active");
                    $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                    $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
                });

                tbodyElement.css('display', 'auto');
                return false;
            });
        });

Answer 3

试试这个...

   $(document).ready(function () {
        $("thead.opening").click(function () {

            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
            });

            $(this).next().css('display', 'auto');
            return false;
        });
    });

Answer 4

我知道您现在尝试做什么，您尝试将样式显示道具删除为默认值。不要使用自动

试试这个..

$(this).next().css('display', '');