jQuery .toggle() 按钮需要点击两次

Question

我正在尝试做两件事：

在单击“显示评论”按钮后加载 Disqus 脚本 embed.js。
通过同一个按钮隐藏 disqus_thread div，同时更改按钮中的文本。

问题是页面加载后，我必须点击“显示评论”两次；第一次点击加载 embed.js 并且应该将 disqus_thread 切换为可见，但我必须再次点击才能看到 disqus_thread。（加载 embed.js 并不重要；我只想切换 div 并隐藏它。）

注意：showComments() 中的 {{ }} 构造是 hugo，但我认为它们不是问题所在。

    <button id="disqus-button" onclick="showComments()">Show comments</button>
    
    <script>
    
    $( document ).ready(function() {
    $('#disqus-button').click(function(){
        $('#disqus_thread').toggle();
        $(this).text( $(this).text() == 'Show Comments' ? "Hide Comments" : "Show Comments");
    });
    });
    
    </script>
    
    <div id="disqus_thread"></div>
    
    <script>
    
    function showComments() {
        var disqus_config = function () {
        {{with .Params.disqus_identifier }}this.page.identifier = '{{ . }}';{{end}}
        {{with .Params.disqus_title }}this.page.title = '{{ . }}';{{end}}
        {{with .Params.disqus_url }}this.page.url = '{{ . | html  }}';{{end}}
        };
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "{{ .Site.DisqusShortname }}" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    }

</script>

Answer 1

您可以使用trigger函数。

示例如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button id="disqus-button">Show Comments</button>

<script>

    $(document).ready(function () {
        $('#disqus-button').click(function () {
            showComments();
            if ($(this).text() == 'Show Comments') {
                $(this).text("Hide Comments");
                setTimeout(() => {
                    $('#disqus-button').trigger("click");
                }, 1000);
            }
            else {
                $(this).text("Show Comments");
            }
        });
    });

</script>

<div id="disqus_thread"></div>

<script>

    function showComments() {
        console.log('show comments');
        // var disqus_config = function () {
        //     { { with.Params.disqus_identifier } } this.page.identifier = '{{ . }}'; { { end } }
        //     { { with.Params.disqus_title } } this.page.title = '{{ . }}'; { { end } }
        //     { { with.Params.disqus_url } } this.page.url = '{{ . | html  }}'; { { end } }
        // };
        // var d = document, s = d.createElement('script'); s.async = true;
        // s.src = '//' + "{{ .Site.DisqusShortname }}" + '.disqus.com/embed.js';
        // s.setAttribute('data-timestamp', +new Date());
        // (d.head || d.body).appendChild(s);
    }

</script>

Answer 2

根据我在代码中看到的情况，问题是 <div id="disqus_thread"></div> 最初未设置为隐藏。

所以在第一次点击时，对 $('#disqus_thread').toggle(); 的调用将隐藏 div。第二次单击将其设置回可见状态。我相信在这种情况下按钮文本会与切换不同步。

如果这是问题所在，以下内容可以解决问题，

 $( document ).ready(function() {
    $('#disqus-button').click(function(){
       ....
    });

    $('#disqus_thread').hide(); // hide it initially when loading the page 
   });

或者您也可以直接将 style='display:none' 设置为 disqus_thread div。

Answer 3

#disqus_thread 应该在开始时隐藏（因为没有加载评论）
showComments()应该重命名，这不是它的工作，也许loadComments()是一个更好的名字。
应该检查 embed.js 是否已经加载并且只执行一次该代码。
一旦完成，就是切换可见性和更改按钮文本。

    <button id="disqus-button">Show Comments</button>

    <div id="disqus_thread" style="display:none">adasd</div>

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <script>
        function showComments() {
            console.log('Show comments');

            //checking if embed.js is already loaded. This should just be done
            //once.
            if ($('script[src*="embed.js"]').length == 0) {
                //original code on showComments().
            }
        }

        $(document).ready(function() {
            $(document).on('click', '#disqus-button', function() {
                showComments();
                $('#disqus_thread').toggle();
                $(this).text($(this).text() == 'Hide Comments' ? "Show Comments" : "Hide Comments");
            });
        });
    </script>

Answer 4

您可以添加一个 window 级别变量来检查 disqusJs 脚本是否在切换 div 之后添加到点击处理程序中，这样您将切换内容以及加载脚本第一次点击。

disqusJsScriptAdded = false;

function loadDisqusJs() {
  //var disqus_config = function () {
  // {{with .Params.disqus_identifier }}this.page.identifier = '{{ . }}';{{end}}
  // {{with .Params.disqus_title }}this.page.title = '{{ . }}';{{end}}
  // {{with .Params.disqus_url }}this.page.url = '{{ . | html  }}';{{end}}
  //};
  disqusJsScriptAdded = true;
 
  var d = document,
    s = d.createElement('script');
  s.async = true;
  s.src = '//' + "{{ .Site.DisqusShortname }}" + '.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
}


$(document).ready(function() {
  $('#disqus-button').click(function() {
    $('#disqus_thread').toggle();
    $(this).text($(this).text() == 'Show Comments' ? "Hide Comments" : "Show Comments");
    
    if (!disqusJsScriptAdded) {
      loadDisqusJs();
    }
  });
});

#disqus_thread {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="disqus-button">Show comments</button>
<div id="disqus_thread">
  This is content of the thread!
</div>

jQuery .toggle() 按钮需要点击两次

jQuery .toggle() button needs to be clicked twice

javascript

jquery

toggle