Question

我正在使用WordPress。并安装了Disqus插件。所以在Disqus插件的插件设置中，我发现了以下内容：

<p>
<a class="button" href="#">Sync Comments</a>
This will download your Disqus comments and store them locally in WordPress
</p>

按钮的CSS

.wp-core-ui p .button {
    vertical-align: baseline;
}
.wp-core-ui .button, .wp-core-ui .button-secondary {
    background: none repeat scroll 0 0 #F7F7F7;
    border-color: #CCCCCC;
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 rgba(0, 0, 0, 0.08);
    color: #555555;
}
.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary {
    -moz-box-sizing: border-box;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    height: 28px;
    line-height: 26px;
    margin: 0;
    padding: 0 10px 1px;
    text-decoration: none;
    white-space: nowrap;
}

当我点击它时，代码改为

<div id="dsq_import">
<p class="status dsq-importing" rel="1575183395">Import in progress (last post id: 1575183395) …</p>
</div>

这是怎么发生的？我在Firefox上有Firebug。我想知道点击后调用的是什么代码。任何Firebug提示跟踪这些事件？

Answer 1

有几种方法可以对此进行调查，两者都会提供不同的信息，具体取决于您的需求。

如果您只是想知道正在调用的是什么javascript，可以使用javascript选项卡，这里有解释：

http://getfirebug.com/javascript

如果您对数据本身感兴趣，网络标签将提供远程发送的内容以及响应内容。

http://getfirebug.com/network

firebug wiki在小组部分也有丰富的知识。

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Test</title>
</head>
<body>
    <p>
        <a class="button" href="#">Sync Comments</a>
        This will download your Disqus comments and store them locally in WordPress
    </p>    
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
            $(".button").on("click", function(){
/*
         Add your code to start the importing process 
         ...
         ...
*/  
                var p = $(this).parent("p");
                p.replaceWith('<div id="dsq_import"><p class="status dsq-importing" rel="1575183395">Import in progress (last post id: 1575183395)</p></div>');
            });

        });

    </script>
</body>
</html>

您正在寻找的代码应该使用类似的想法。

需要了解点击时更改的HTML代码

2 个答案: