Question

我的开发站点上有流动的html和jquery代码。它有效，但看起来笨拙。我正在寻找一种更简单的清洁方法，以使该函数在div中淡入并在div中淡出。

$(document).ready(function() {
  $("#sup1").click(function() {
    $("#sup").show(300);
    $("#select").hide(300);
    $("#con").hide(300);
  });
  $("#con1").click(function() {
    $("#con").show(300);
    $("#conselect").show(300);
    $("#select").hide(300);
    $("#sup").hide(300);
  });
  $("#con2").click(function() {
    $("#conform").show(300);
    $("#select").hide(300);
    $("#conselect").hide(300);
    $("#sup").hide(300);
  });
  $(".back").click(function() {
    $("#select").show(300);
    $("#sup").hide(300);
    $("#con").hide(300);
    $("#conform").hide(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select" class="lin">
  <div>
    <a href="#" id="sup1">I am Cool</a>
    <a href="#" id="con1">I am Lame</a>
  </div>
</div>
<div id="sup" style="display:none">FORM GOES HERE
  <p><a href="#" class="back link"><i class="fas fa-angle-left"></i> Go back</a></p>
</div>
<div id="con" style="display:none">
  <div id="conselect" style="display:block">
    <a href="#" id="con2">Learn More</a>
    <a href="https://google.com" target="_blank">Enroll Now</a>
    <p><a href="#" class="back link"><i class="fas fa-angle-left"></i> Go back</a></p>
  </div>
  <div id="conform" style="display:none">FORM GOES HERE
    <p><a href="#" class="back link"><i class="fas fa-angle-left"></i> Go back</a></p>
  </div>
</div>

Answer 1

尝试以下代码：

$(document).ready(function() {
  $(".js-trigger").click(function() {
    const $t = $(this);
    const href = $t.attr('href');
    
    $(".js-trigger-target").hide(300);
    $(href).show(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor3" class="js-trigger-target">
  <div>
    <a href="#anchor1" class="js-trigger">I am Cool</a>
    <a href="#anchor2" class="js-trigger">I am Lame</a>
  </div>
</div>
<div id="anchor1" style="display:none" class="js-trigger-target">FORM GOES HERE
  <p><a href="#anchor3" class="js-trigger"><i class="fas fa-angle-left"></i> Go back</a></p>
</div>
<div id="anchor2" style="display:none" class="js-trigger-target">
  <div id="conselect" style="display:block">
    <a href="#">Learn More</a>
    <a href="https://google.com" target="_blank">Enroll Now</a>
    <p><a href="#anchor3" class="js-trigger"><i class="fas fa-angle-left"></i> Go back</a></p>
  </div>
  <div style="display:none" class="js-trigger-target">FORM GOES HERE
    <p><a href="#anchor3" class="js-trigger"><i class="fas fa-angle-left"></i> Go back</a></p>
  </div>
</div>

Answer 2

查看您拥有的内容足以满足您想要实现的目标。无需过度设计简单的东西。就是说，如果您必须使其更加整洁……可以提高对所有匿名内联函数使用命名函数的可读性，

function onCon1Clicked() {
  $("#sup").show(300);
  $("#select").hide(300);
  $("#con").hide(300);
}

function onCon2Clicked() {
    $("#conform").show(300);
    $("#select").hide(300);
    $("#conselect").hide(300);
    $("#sup").hide(300);
}

function onBackClicked() {
  $("#select").show(300);
  $("#sup").hide(300);
  $("#con").hide(300);
  $("#conform").hide(300);
}

$(document).ready(function() {

  // Click on sup1.
  $("#sup1").click();

  // Assign click handlers.
  $("#con1").click(onCon1Clicked);
  $("#con2").click(onCon2Clicked);
  $(".back").click(onBackClicked);
});

jQuery选择关闭div并显示另一个

2 个答案: