Question

我正在尝试制作一个带有标题的框和标题左右两个箭头。当你点击任一箭头时，框应该淡出，下一个应该淡入。我在页面上有另一个这样的选项（发送并返回）并且一个工作正常，但由于某种原因它打破了当我有3个选项。我怀疑在添加第三个选项时，我的jQuery代码会中断。

我的JSFiddle（最小的CSS以避免混淆，问题不存在）

$('#go2').click(function(e) {
  $('.box1, .box3').fadeOut('fast', function() {
    $('.box2').fadeIn('slow');
  });
});

$('#go3').click(function(e) {
  $('.box2, .box1').fadeOut('fast', function() {
    $('.box3').fadeIn('slow');
  });
});

$('#go1').click(function(e) {
  $('.box2, .box3').fadeOut('fast', function() {
    $('.box1').fadeIn('slow');
  });
});

Answer 1

很抱歉，但是看看你的jsfiddle文件，我看到了2个问题：

您使用相同的ID来获取更多html标记，但尝试使用类是不可能的。
在box2上你使用id =＆＃34; 1＆＃34;和id =＆＃34; 3＆＃34;但在js上你使用go1，go2，go3。

Answer 2

ID必须是唯一的（请参阅 id =“go2”）。

jQuery库必须包含在其他库之前。

您可以使用唯一的处理程序简化所有操作：

$('.box1, .box2, .box3').on('click', function(e) {
    var isArrowRight = $(e.target).is('.right');
    var isLeftArrow  = $(e.target).is('.left');
    if (!(isArrowRight || isLeftArrow)) {
        return; // do nothing if you don't click the left/right arrow...
    }
    var nextEle = (isArrowRight) ? $(this).next('[class^=box]') : $(this).prev('[class^=box]');
    if (nextEle.length == 0) {
        nextEle = (isArrowRight) ? $('.box1') : $('.box3');
    }
    $('.box1:visible, .box2:visible, .box3:visible').fadeOut('fast', function(){
        nextEle.fadeIn('slow');
    });
});

i {
    display: inline;
}

h1 {
    display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap..css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/icon.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<div class="box1">
    <div class="boxTitle">
        <i id="go3" class="icon angle left"></i>
        <h1>Box 1</h1>
        <i id="go22" class="icon angle right"></i>
    </div>
    <div class="boxField1">
        Boxfield 1
    </div>
</div>

<div class="box2" style="display: none">
    <div class="boxTitle">
        <i id="1" class="icon angle left"></i>
        <h1>Box 2</h1>
        <i id="3" class="icon angle right"></i>
    </div>
    <div class="boxField2">
        Boxfield 2
    </div>
</div>

<div class="box3" style="display: none">
    <div class="boxTitle">
        <i id="go2" class="icon angle left"></i>
        <h1>Box 3</h1>
        <i id="go1" class="icon angle right"></i>
    </div>
    <div class="boxField3">
        Boxfield 3
    </div>
</div>

滑动框/菜单有3个选项

2 个答案: