Question

我正在尝试使用Violentmonkey和jQuery从单个hide中删除div类。我的用户脚本什么都没做，我也不知道为什么。

已经尝试：

添加// @grant GM_addStyle
使用以下选择器：$("expand_collapse.hide")，$("div.expand_collapse")，$(".expand_collapse")
使用Tampermonkey
使用@require https://code.jquery.com/jquery-3.4.1.min.js获取jQuery

这是div：

<div class="expand_collapse hide">
  <a href="javascript:" id="expand_all">
        Expand
  </a>
  <a href="javascript:" id="collapse_all">
        Collapse
  </a>
</div>

这是我的用户脚本：

// ==UserScript==
// @name unhide
// @match https://example/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// ==/UserScript==

$("div.expand_collapse.hide").removeClass("hide");

当我使用Chrome检查器手动删除hide类时，将显示“展开”和“折叠”链接并按预期工作。我想用userscript达到相同的目的，但无法正常工作。

Answer 1

由于评论中的家伙，我发现我尝试修改的内容是动态添加的，因此当我的用户脚本触发时，该内容尚不存在。根据{{3}}的建议，我为* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* [disabled]box-sizing: border-box; */ } body{ margin:0; background: none; font-family: 'Helvetica Neue','Helvetica', Arial, sans-serif; /*background-size: 100% auto;*/ } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } section { position: relative; width: auto; height: auto; z-index: 0; color: white; box-sizing: border-box; padding: 2%; margin-left:1.4%; } /* This section:after perhaps is the main issue. I think it would be nice to delete it or change it. I don't like absolute position, once I mean to produce something responsive in the near future */ section:after { content: 'Default - Click on a tab above! I want this to disappear!'; position: absolute; left: 0; top: 55px; width: 90%; font-size: 100%; text-align: left; background-color: #5E6B7F; padding: 2%; margin-left:1.4%; } button { cursor: pointer; width: 100%; display: inline-block; background-color: #5E6B7F; color: white; text-align: center; transition: .25s ease; border: none; padding: 2%; font-size:90%; border-radius: 12px 12px 0 0; } div.tab:focus button, button:focus { background-color: #8DA1BF; } button:focus + .div, div.tab:focus .div { display: block; position: absolute; background-color: #5E6B7F; color:white; height: auto; width: 100%; left: 0; z-index: 2; outline: none; top: 55px; text-align: left; padding: 2%; margin-left: 1.4%; } .div { display: none; font-size: 100%; } div.tab { display: inline-block; } div.tab:focus { outline: none; }添加了3秒的延迟，效果很好。这是有效的用户脚本：

StreamBuilder(
              stream: reference
                  .where("post_id", isEqualTo: widget.postModel.uid)
                  .orderBy("created", descending: true)
                  .snapshots(),
              builder: (context, snapshot) {
                var postList =
                    snapshot.hasData ? snapshot.data.documents : null;
                print("size: $postList");
                return (snapshot != null &&
                        (!snapshot.hasData || postList.length == 0))
                    ? Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          "No comments yet",
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      )
                    : ListView.builder(
                        shrinkWrap: true,
                        itemCount: postList.length,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          Map<String, dynamic> dataMap =
                              postList[index].data;
                          return Container(
                            padding: EdgeInsets.all(16),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.tag_faces,
                                      color: Colors.black45,
                                    ),
                                    SizedBox(
                                      width: 8,
                                    ),
                                    Text(
                                      dataMap["name"],
                                      style: TextStyle(
                                          fontSize: 16,
                                          color: Colors.black54,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ],
                                ),
                                SizedBox(
                                  height: 4,
                                ),
                                Text(
                                  dataMap["comment"],
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.black),
                                ),
                              ],
                            ),
                          );
                        });
              })

如果有替代/更优雅/更好的解决方案，我将非常高兴了解它。谢谢！

编辑：Archer's建议使用setTimeout()的时间要短得多（比我必须与// ==UserScript== // @name unhide // @match https://example.com/* // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js // ==/UserScript== setTimeout( function() { $("div.expand_collapse.hide").removeClass("hide"); }, 3000 )一起使用的时间）短，setInterval()的使用时间是setTimeout()出现的时间。这样可以使链接显示得更快。这是代码：

clearInterval()

如何在用户脚本中使用.removeClass（）

1 个答案: