使用Javascript切换按钮的可见性

Question

目前，我可以选择最多3个产品并单击“比较”按钮，将创建一个表格，显示它们的所有相似之处/差异。

但是我想这样做，以便当按下比较按钮并显示表格时，按钮变为“返回产品”，并在点击时将用户带回到products.php。

目前，如果正在比较产品，并且用户再次按下按钮，则表格只会再次添加产品，使行数增加一倍。

<body>
  <div id="content">
    <div class="bg-img-container" style="margin-top: -1.5%;">
      <img src="images/books-bg.jpg" alt="Book Image" style="width:100%;">
    </div>
    <br><br>
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12" style="text-align: center;">

          <script>
          var count = 0; //for counting clicks

          $(function(){
            $(".product").on('click', function(e) {
              e.preventDefault();

              //if class is already there, decrement to remove book selection
              if ($(this).closest('.product').hasClass("compare")) {
                $(this).closest('.product').removeClass("compare");
                count = count - 1;

              } else if (count <= 2) {
                count += 1; //increment count
                $(this).closest('.product').toggleClass('compare');

              } else { //cannot select more than 3
                alert("Please Limit your Selection to 3 books");
              }
            });

            //Building the comparison table
            $(".btn.goCompare").on('click', function(e){
              e.preventDefault();
              buildComparisonTable();
            });
          });

          function buildComparisonTable(){

            var comparisonTableBody = $('table.comparison tbody');
            var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
            var comparisonTableBodyProductImgCol = $('table.comparison tbody tr.product-img');
            var comparisonTableBodyProductScopeCol = $('table.comparison tbody tr.product-scope');
            var comparisonTableBodyProductImpactCol = $('table.comparison tbody tr.product-impact');
            var comparisonTableBodyProductorcidCol = $('table.comparison tbody tr.product-orcid');
            var comparisonTableBodyProductoaCol = $('table.comparison tbody tr.product-oa');
            var comparisonTableBodyProductdspCol = $('table.comparison tbody tr.product-dsp');

            comparisonTableBody.find('.product-col').remove();
            $('.product.compare').each(function(){

              var id = $(this).attr('data-id');
              var title = $(this).attr('data-title');
              var img = $(this).attr('data-img');
              var scope = $(this).attr('data-scope');
              var impact = $(this).attr('data-impact');
              var orcid = $(this).attr('data-orcid');
              var oa = $(this).attr('data-oa');
              var dsp = $(this).attr('data-dsp');

              comparisonTableBodyProductTitleCol.append('<th class="product-col"><center>'+title+'</center></th>');
              comparisonTableBodyProductImgCol.append('<td class="product-col"><img src='+img+'></td>');
              comparisonTableBodyProductScopeCol.append('<td class="product-col">'+scope+'</td>');
              comparisonTableBodyProductImpactCol.append('<td class="product-col">'+impact+'</td>');
              comparisonTableBodyProductorcidCol.append('<td class="product-col">'+orcid+'</td>');
              comparisonTableBodyProductoaCol.append('<td class="product-col">'+oa+'</td>');
              comparisonTableBodyProductdspCol.append('<td class="product-col">'+dsp+'</td>');
            });
          }
          </script>

        </div>

        <div class="col-md-12 col-sm-8">
          <hr>
          <h4 style="float: left; text-align: left;">Select up to 3 books, Click "Compare Titles", View your Top Picks Side-by-Side!</h4>
          <button class='btn goCompare' id="compare-remove"; style="color: white">Compare Titles</button>
          <table class='comparison' border="1px" style="float: left;">
            <thead>
              <tr class='product-title'></tr>
            </thead>
            <tbody>
              <tr class='product-img'></tr>
              <tr class='product-impact'></tr>
              <tr class='product-oa'></tr>
              <tr class='product-scope'></tr>
              <tr class='product-orcid'></tr>
              <tr class='product-dsp'></tr>
            </tbody>
          </table>
        </div>

        <script>
        function removeSelection() {
          var x = document.getElementById("compare-remove");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>

        <div class="col-md-12">
          <?php getpcatpro(); ?>
        </div><!-- col-md-12 -->

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

</body>

Answer 1

我希望这就是你要找的东西

 $(document).ready(function(){ $('button').click(function(){ if ($(this).is('[btn-link]')) { window.location = "product.php" } else { $(this).hide() $('#back').show() } }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="compare">Compare</button> <button id="back" btn-link style="display:none">Back to products</button>

要么

 $(document).ready(function(){ $('#compare').click(function(){ $(this).hide() $('#back').show() }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="compare">Compare</button> <a href="product.php" id="back" style="display:none">Back to products</a>

我没有使用jquery toggle()函数，因为如果你快速单击按钮，它将为按钮产生不同的结果。

代码请求

<button id="compare" onclick="$(this).hide(); $('#back').show()">Compare</button>
<button id="back" style="display:none" onclick="clearTable()">Back to products</button>

<script>
  function clearTable(){
    $('table tr').each(function(){
      $(this).html('')
    })

    $('#back').hide()
    $('#compare').show()
  }
</script>

使用Javascript切换按钮的可见性

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-07-25 03:13:08

使用Javascript切换按钮的可见性

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-07-25 03:13:08

解决方案1
3 已采纳 2019-07-25 03:13:08