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

Question

我正在尝试做两件事：

1. 在单击“显示 cmets”按钮后加载 Disqus 脚本 embed.js。
2. 通过同一按钮隐藏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

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

    <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 2

您可以使用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 3

从我在代码中看到的，问题是 <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 4

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

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>