Question

我有不同的div，它们都有相同的类＆＃34; textBox＆＃34;。

同时应始终只显示一个框。对于大多数Box，我的页面底部有一个按钮，可以单击并触发使框显示并隐藏此时已显示的框。

编辑：小提琴https://jsfiddle.net/8uvsq7ta/

为此，我有这个JS代码：

$( "#gettingStartedButton" ).click( function () {

        if (! $( "#gettingStarted" ).is( ":visible" ) ) {
            if ( $( "#extension" ).is( ":visible" ) ) {
                $( "#extension" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#executingBox" ).is( ":visible" ) ) {
                $( "#executingBox" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#feedback" ).is( ":visible" ) ) {
                $( "#feedback" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#impressum" ).is( ":visible" ) ) {
                $( "#impressum" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
            else if ( $( "#registration" ).is( ":visible" ) ) {
                $( "#registration" ).fadeOut( function () {
                    $( "#gettingStarted" ).fadeIn();
                });
            }
        }
        else {
            $( "#gettingStarted" ).fadeOut( function () {
                $( "#executingBox" ).fadeIn();
            });
        }
    });

div框看起来像这样：

<div id="gettingStarted" class="textBox">
test blabla
</div>

<div id="feedback" class="textBox">
test blabla
</div>

<div id="registration" class="textBox">
test blabla
</div>

<div id="impressum" class="textBox">
test blabla
</div>

CSS：

.textBox {
    diplay: none;
}

此代码检查是否已显示该框，如果是，则检查 EVERY OTHER BOX 以获取可见的那个，然后将其淡出，然后淡化已提交的框。

我的问题是，我需要每个框的这部分代码。我认为应该有更好的方法来实现这一目标。

我正在搜索的是一种方法 openBox（id）其中我将框的id作为参数给出，它会自动检测带有class参数的所有其他框并检测哪些框已经淡入，然后将其淡出以淡出带有 id 的框。

可悲的是，我的javascript技能并不好，所以我试图找到一些建议或示例如何实现这一点。

非常感谢你能给我的每一个输入。

Answer 1

var $textBox = $(".textBox");               // get 'em all!
$textBox.eq(0).fadeIn();                    // FadeIn first one

$("[data-showid]").on("click", function(){  // Buttons click (Use data-* attribute!) 
  var $box = $("#"+ this.dataset.showid);   // Get the target box ID element
  $textBox.not($box).hide();                // Hide all bot targeted one
  $box.stop().fadeToggle();                 // FadeToggle target box
});

.textBox{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gettingStarted" class="textBox">getting started blabla</div>
<div id="feedback" class="textBox">feedback blabla</div>
<div id="impressum" class="textBox">impressum blabla</div>

<button data-showid="gettingStarted">GS</button>
<button data-showid="feedback">FB</button>
<button data-showid="impressum">Imp</button>

如果您不希望当前框切换，请使用.fadeToggle()代替.fadeIn()。

http://api.jquery.com/fadetoggle/
https://api.jquery.com/data/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 2

在按钮上添加data-*属性以将其链接到其内容：

<button id="gettingStartedButton" data-link="gettingStarted">GS</button>
<button id="feedbackButton" data-link="feedback">FB</button>
<button id="impressumButton" data-link="impressum">Imp</button>

javascript变得非常简单：

$( "#gettingStarted" ).fadeIn();

$('button').click(function(){
    var link = $(this).data('link');
    $('.textBox:visible').fadeOut(function(){
                    $('#' + link).fadeIn()
                });
})

更新了小提琴：https://jsfiddle.net/8uvsq7ta/2/

Answer 3

我是用课做的。 HTML就像：

＆＃13;

    <div class="textBox gettingStartedButton" style="display: none;"> 1 test blabla </div>
<div style="display: none;" id="feedback" class="textBox .gettingStartedButton gettingStartedButton"> 2 test blabla </div>
<div id="registration" class="textBox gettingStartedButton" style="display: block;">3 test blabla </div>
<div id="impressum" class="textBox"> 4 test blabla </div>

＆＃13;

并使用以下代码。首先保持任何元素可见。然后点击该元素，它将其淡出并淡化下一个元素。并添加类＆＃34; gettingStartedButton＆＃34;到可见元素再次运行click事件。

＆＃13;

$( ".gettingStartedButton" ).on('click', function () {
  
  var visible_element  = $('.textBox:visible');
  visible_element.next().fadeIn();
  visible_element.next().removeClass('gettingStartedButton');
  visible_element.next().addClass('gettingStartedButton');
  visible_element.fadeOut();
  
});

＆＃13;

切换按钮上的元素视图单击

3 个答案: