javascript - jquery:单击时仅加载一次内容并保留内容

Question

单击按钮后，它会从不同的源加载内容。我如何阻止它再次重新加载内容，尤其是当我点击其他按钮时？下面，我将按钮用作选项卡/切换。我有它，一旦我点击一个按钮，它就会将内容加载到一个 div 中。内容是一堆带有值的复选框，每个选项卡的值都不同。目前我有它，如果你点击按钮，它会带来内容，但是当你点击另一个按钮来检查其他复选框时，它会删除以前检查的内容。希望能够单击按钮，检查我需要的内容，转到另一个按钮以显示内容并在需要时返回原始内容。那么我如何只加载一次内容以防止它再次上传和删除之前的内容？

按钮 HTML

    <ul class="category">
        <li><a href="#web" class="category-btn web-btn">WEBSITE</a></li>
        <li><a href="#page" class="category-btn cama-btn">PAGES</a></li>
        <li><a href="#document" class="category-btn">DOCUMENTATION</a></li>
    </ul>

容器代码将显示用户可以选择的产品复选框。

    <div id="product_container" >
        <div class="website box" >
            <div class="tx-row" id='webin' >

            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >

            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >

            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>

JQuery 按类别加载复选框的内容。

    $(document).ready(function(){   
        var $content = $('.box');
        function showContent(type) {
            $content.hide().filter('.' + type).show();
        }
        $('.category').one('click', '.web-btn', function(e) {
            $("#webin").load("/wp-content/themes/child/search-web.php");
            $("#webx"+").load("/wp-content/themes/child/search-notlikeweb.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.page-btn', function(e) {
            $("#pagein").load("/wp-content/themes/child/search-page.php");
            $("#pagex").load("/wp-content/themes/child/search-notlikepage.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.document-btn', function(e) {
            $("#documentin").load("/wp-content/themes/child/search-document.php");
            $("#documentx").load("/wp-content/themes/child/search-notlikedocument.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $(".box").hide();
    });

Answer 1

我认为您不想在这里使用 .load()。在您的 HTML 中只包含 3 个不同的选项卡并切换它们可能会更好。

所以你只需将内容加载到每个 div 一次。也许这会对您有所帮助:

$('.toggle').on('click', function(){
  var $target = $($(this).data('target'));
  $target.siblings().removeClass('active');
  $target.addClass('active');
});

.box {
  display: none;
}

.box.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product_container" >
        <div class="website box active" >
            <div class="tx-row" id='webin' >
              Content for website box
            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >
              Content for page box
            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >
              Content for document box
            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>
    
    <button class="toggle" data-target=".website.box">Toggle website</button>
    <button class="toggle" data-target=".page.box">Toggle page</button>
    <button class="toggle" data-target=".document.box">Toggle document</button>