Question

我在每行显示子行内容的表或文章和切换。在子行中我还显示Disqus评论。这一切都运行正常但我不希望一次打开多个行并加载多个Disqus评论，这会减慢我的页面。

我想在激活一个切换时禁用所有切换按钮。每个切换链接（类option_toggle）及其所在的行都具有唯一ID。见下文。我怎样才能通过JQuery实现这一目标？

		//Hide main article table's options row
		$(document).ready(function() {
		    $(".option_toggle").click(function(e) {
		    	e.preventDefault();

		    	aid = $(this).attr('id');

		    	//Determine if we are showing the comments or hiding the comments
		    	is_hidden = $(this).parent().parent().next(".options_row").is( ":hidden" );

		    	if(is_hidden)
		    	{
		    		disqus_container = '#disqus_container_' + aid;

		    		jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container);

					$.ajax({
				           type: 'POST',
				           url: 'http://www.example.com/disqus',
				           data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid},
				           dataType: 'json',
				           success : function(data) {
				               if (data)
				               {
				               		$('#disqus_container_' + aid).html(data.script);

				               		DISQUS.reset({
				                       	reload: true,
				                    	   config: function () {
				                    	        this.page.url = 'http://www.example.com/#!'+ aid;
				                    	        this.page.remote_auth_s3 = data.payload;
				                    	        this.page.identifier = aid;
				                    	        this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP";
				                    	    }
				                    });
				               }
			            }
			        });
				}
				else
				{
					//Remove the comments
					$('#disqus_container_' + aid).prev('#disqus_thread').remove();
					$('#disqus_container_' + aid).html('');
				}

		        $(this).parent().parent().next(".options_row").toggle("fast");
		    });
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<tbody>
    <tr class="main_row" data-id="ROWID428272">
    <td class="bkgcol-sunflower wht-border">
    <td>
    <a id="428272" class="option_toggle" href="#" title="Ratings/Comments">
    </td>
    <td class="key-title dark unpadded">
    <td class="artcl_info text-center">Scitech</td>
    <td class="text-center" style="width:10px">
    <td class="text-center">
    </tr>
    <tr class="options_row" style="display: table-row;">
    <td colspan="6">
    <div class="row article_options">
    <div class="row comments_row">
    <div id="comments" class="col-md-12">
    <div class="text-center article_title top_pad" style="width: 100%;">Comment on This Article</div>
    <div id="disqus_thread">
    <div id="disqus_container_428272">
    </div>
    </div>
    </td>
    </tr>
    <tr class="main_row" data-id="ROWID427694">

Answer 1

我希望在激活一个切换时禁用所有切换按钮。

$(".option_toggle").click(function(e) {
    e.preventDefault();

    // Remove click event handler defined above, and add a new one which prevents
    // the click from doing anything
    $(".option_toggle").off('click').on('click', function(e) {
        e.preventDefault();
    });

    aid = $(this).attr('id');
    // Continue with rest of your code ...
});

但这真的是你想要的吗？这意味着一旦您单击切换，您就无法单击任何其他切换。它还意味着所有其他切换仍然看起来像链接，也许您应该更新样式以指示它们被禁用或类似的东西，例如添加禁用的类和样式：

使用Javascript：

$(".option_toggle").addClass('disabled-link');

CSS：

a.disabled-link {
    cursor: default;
    color: #666;
    text-decoration: none;        
}

当一行已经切换时，JQuery禁用表行切换

1 个答案: