Question

我有一个html表，我想使用切换开关显示其他信息（然后按下其他行）。

用来描述我要做什么的图像：https://www.screencast.com/t/SBzG2IN9 点击切换后，显示另一行（绿色）并向下推表格。

注意：下面的代码不是HTML格式，而是WordPress Toolset后端。 [wpv-post-id]是一个工具集变量，将在前端输出wordpress postid。例如1915，因此data-prod-cat =“ 1915”，该类变为“ cat1915”。

[wpv-post-excerpt format =“ noautop”]也会以纯文本格式输出相应的帖子摘录（无

）。

更新：我已经更新了代码，并使用切换按钮用于将显示从 display：none 更改为 display：table-row ；但是摘录中没有出现新行。

更新2：已解决！

这是循环输出：

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <table width="100%">
        <thead>
            <tr>
                <th>[wpv-heading name="types-field-release-date"]Year[/wpv-heading]</th>
                <th>[wpv-heading name="post-link"]Title[/wpv-heading]</th>
                <th>[wpv-heading name="types-field-publisher"]Publisher[/wpv-heading]</th>
                <th>[wpv-heading name="post-excerpt"]Synopsis[/wpv-heading]</th>
            </tr>
        </thead>
        <tbody class="wpv-loop js-wpv-loop">
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none" [wpv-post-excerpt format="noautop"]></tr>
        </wpv-loop>
        </tbody>
    </table>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

Answer 1

您不能在CSS选择器或类名中使用[和]。因为它们是默认的属性选择器。

您必须将类更改为带有A-Za-z0-9字符的内容。

请参阅attribute selector

当您要使用.cat[wpv-post-excerpt]选择元素时。浏览器认为您想要这样的事情： <tr class="cat" wpv-post-excerpt=""></tr>

在那之后，我认为它是模板变量，而不是这个[wpv-post-excerpt]字符串。查看主题的结果并与他们一起工作。

Answer 2

class ClassPrintable:
    @classmethod
    def print_class(cls):
        print(cls)

    @classmethod
    def __init_subclass__(cls):
        cls.print_class()

class MyClass(ClassPrintable):
    pass

$view = view('blade',["data"=>$data,])->render();
    return $view;

Answer 3

您的代码存在的问题是，tr仅在table标记内时才用作表行。其次，您不能在选择器中使用[或]。因此，请根据以下内容更改代码：

<table>
    <wpv-loop>
      <tr>
        <td>[types field='release-date' style='text' format='Y'][/types]</td>
        <td>[wpv-post-link]</td>
        <td>[types field="publisher"][/types]</td>
        <td><a href="#" class="toggler" data-prod-cat='wpv-post-excerpt'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
      </tr>
      <tr class="cat-wpv-post-excerpt" style="display:none">
        <td colspan="100%">I m test</td>
      </tr>
    </wpv-loop>
</table>

您的js代码是这样的：

jQuery(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat-' + $(this).attr('data-prod-cat')).toggle();
  });
});

Answer 4

好的，解决了！

jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

此代码有效，但较早的答案表明css选择器不适用于[]。但这只是后端的变量。但是，[wpv-post-excerpt]输出很长的一段，它也不能用作选择器。所以我用了[wpv-post-id]来输出wordpress post id。

以下是起作用的代码段：

<table>
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none">
            <td colspan="4">[wpv-post-excerpt]</td>
            </tr>
        </wpv-loop>
        </tbody>
</table>

使用JQuery

4 个答案: