单击按钮时切换元素视图

Toggle elements view on buttons click

本文关键字：元素 视图 按钮 单击      更新时间：2023-09-26

>我有不同的div，它们都有相同的类"textBox"。

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

编辑：小提琴 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;
}
此代码检查该框

是否已显示，如果是，则检查每隔一个框以获取可见的框，然后将其淡出以随后淡入引用的框。

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

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

可悲的是，我的JavaScript技能不是那么好，所以我试图找到一些建议或例子来实现这一目标。

非常感谢您能给我的每一个意见。

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>

如果您不希望当前框切换，则不要使用.fadeIn()而不是.fadeToggle()。


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

通过在按钮上添加 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/

我用class做到了。HTML 会像：

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

并使用下面的代码。首先保持任何元素可见。然后在单击该元素时，它会将其淡出并淡入下一个元素。并将类"gettingStartedButton"添加到可见元素以再次运行单击事件。

$( ".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();
  
});

相关文章：