Question

我有四个div，第一个是在网站加载时显示。我目前正在使用CSS隐藏其他三个（显示：无）

在显示的第一个div中，我有一个按钮，点击，我想隐藏当前div，然后显示下一个div。

String identifier = null;
TelephonyManager tm = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);
if (tm != null)
      identifier = tm.getDeviceId();
if (identifier == null || identifier .length() == 0)
      identifier = Secure.getString(context.getContentResolver(),Secure.ANDROID_ID);

因此，我希望创建一些Jquery来实现这一目标。

这是我所拥有的那些根本不起作用的笨拙的代码......

<div id="one">
            <h3>Placeholder</h3>
            <form>
                    <button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
            </form>    

</div><!--Closes One-->

<div id="two">
            <h3>Placeholder</h3>
            <form>
                    <button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Two-->

<div id="three">
            <h3>Placeholder</h3>
            <form>
                    <button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Three-->

<div id="four">
            <h3>Placeholder</h3>
</div><!--Closes Four-->

忘了CSS，道歉！

$("#next1").click(function(){
    $("#two").show();
    $("#one").hide();
});

$("#next2").click(function(){
    $("#three").show();
    $("#two").hide();
});

$("#next3").click(function(){
    $("#four").show();
    $("#three").hide();
});

我假设我不需要明确地说每次隐藏所有三个div，因为CSS已经隐藏了两到四个，然后通过Jquery一次改变一个。

提前谢谢你！

Answer 1

这应该这样做：

（您为元素使用了类而不是id）

＆＃13;

thenRunAsync

＆＃13;

$("#next1").click(function(){
    $("#two").show();
    $("#one").hide();
});

$("#next2").click(function(){
    $("#three").show();
    $("#two").hide();
});

$("#next3").click(function(){
    $("#four").show();
    $("#three").hide();
});

＆＃13;

#two, #three, #four {
  display: none;
  }

＆＃13;

Answer 2

所以这是你正在寻找的简单查询

$(".btn-default").click(function(){
$(this).closest('div').hide();  //Gets the closest div associated with your button click
$(this).closest('div').next('div').show();   //hide the next div
});

Answer 3

试试这个

$("button.btn-default").click(function(){
$(this).closest('div').hide();  
$(this).closest('div').next('div').show();
});

#two, #three, #four {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
            <h3>Placeholder 1</h3>
            <form>
                    <button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
            </form>    

</div><!--Closes One-->

<div id="two">
            <h3>Placeholder 2</h3>
            <form>
                    <button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Two-->

<div id="three">
            <h3>Placeholder 3</h3>
            <form>
                    <button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
            </form> 
</div><!--Closes Three-->

<div id="four">
            <h3>Placeholder 4</h3>
</div><!--Closes Four-->

Answer 4

It's not necessary to give each div it's own class or ID.

You could give them all the same class and use the jQuery eq: filter to choose the correct div.

Example code:

$(".custom button").click(function(){
    var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.

    $('.custom').hide();
    $('.custom:eq(' + nextDiv + ')').show();
});

Working example: https://jsfiddle.net/ore5h6tk/

Another example, hiding all but the first with CSS: https://jsfiddle.net/ore5h6tk/1/

Hope this helps.

Answer 5

Actually there is nothing wrong with your code .Just make the four divs looks difference.

通过单击按钮显示和隐藏div

5 个答案: