个人中心
gpt4 book ai didi

javascript - 使用 Javascript 切换按钮的可见性

转载 作者：行者123 更新时间：2023-11-30 13:56:28 24 4
gpt4 key购买 nike

我想让它在按下比较按钮并显示表格时，按钮变为“返回产品”，并在单击时将用户带回 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");
              }
            });
          });

          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>
    </div>
  </div>

最佳答案

希望这就是你要找的

$(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 - 使用 Javascript 切换按钮的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57192672/

24 4 0
文章推荐： C# 保存文件对话框
文章推荐： c# - Parallel.For 不使用我的主线程
文章推荐： ios - 将 MarqueeLabel 转换为 Swift 1.2 语法时枚举错误
文章推荐： c# - 在 mvvm 问题中创建类结构
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com