Question

我在wordpress上运行博客。我希望#first在＃span1被点击时消失，但在#second被点击时重新出现。 #second，＃third在＃span1点击时出现，但在#second点击时消失。它的工作原理，但我的问题是可以简化这个JQuery，使其更简单，更整洁。因为将来我可能需要添加更多类似于#third的DIV。其他问题是如何控制fadeIn和fadeOut的持续时间？

HTML

＆＃13;

    $("#span1").on('click', function() {
       $("#second, #third").fadeIn();
       $("#first").hide();
    });
    
    $("#second").on('click', function() {
       $("#first").fadeIn();
       $("#second, #third").hide();
    
    });

＆＃13;

    <span id="first">Blah blah blah, please <span id="span1">click here</span>.</span>
    <span id="second" style="display:none;">Cancel</span>
    <div id="third" style="display:none;">Test</div>

＆＃13;

此代码取自original post的接受回答。

Answer 1

我可以建议的一个改进是将选择器缓存在变量中并使用它们。像这样：

$first = $("#first");
$second = $("#second");
$secondThird = $("#second, #third");
$span1 = $("#span1");

$span1.on('click', function() {
   $secondThird.fadeIn();
   $first.hide();
});

$second.on('click', function() {
   $first.fadeIn();
   $secondThird.hide();
});

Answer 2

您可以对一次操作使用一次点击事件

$(document).ready(function () {
            $("#span1,#second").on('click', function () {
                $("#first,#second, #third").fadeToggle();
            });
        });

Answer 3

为了适应任何未来的div，您可以将类应用于#first可见时不应显示的所有项目。这样，如果添加更多div，则JS代码将不再存在。

<强> HTML

<span id="first">Blah blah blah, please <span id="span1">click here</span>.</span>
<span id="second" class="notFirst">Cancel</span>
<div id="third" class="notFirst">Test</div>
<div id="fourth" class="notFirst">Test</div>
<div id="fifth" class="notFirst">Test</div>
<div id="sixth" class="notFirst">Test</div>
<div id="seventh" class="notFirst">Test</div>

<强> CSS

.notFirst {
  display: none;
}

<强> JS

$("#span1").on('click', function() {
  $(".notFirst").fadeIn(500);
  $("#first").hide();
});

$("#second").on('click', function() {
  $("#first").fadeIn(500);
  $(".notFirst").hide();
});

在淡入淡出效果的持续时间内，您可以简单地添加毫秒数，您可以从代码中看出来。

Answer 4

在此期间，您可以键入一个数字（表示毫秒），如下所示：

.fadeIn(400);

在整个400ms的过程中执行动作。另一种方法是使用诸如“快速”或“慢速”之类的字符串，如下所示：

.fadeIn("slow");

或

.fadeIn("fast");

另外，要缩短它（如果我已正确理解你的问题），你可以使用这个例子：

$("#first > span").click(function() {
  $(this).parent().nextAll("div").fadeIn();
  $(this).parent().hide();
});
$("#second").on('click', function() {
  $(this).prev().fadeIn();
  $(this).prev().nextAll().hide();
});

.container #second, #first > span {
  color: blue;
  cursor: pointer;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <span id="first">
    Blah blah blah, please 
    <span>click here.</span>
  </span>
  <div class="hidden" id="second">Cancel</div>
  <div class="hidden" id="third">Test</div>
  <div class="hidden" id="fourth">Test</div>
  <div class="hidden" id="fith">Test</div>
  <div class="hidden" id="sixth">Test</div>
  <div class="hidden" id="seventh">Test</div>
  <div class="hidden" id="eighth">Test</div>
  <div class="hidden" id="ninth">Test</div>
</div>

简化JQuery

4 个答案: