none
通过jquery获取值 RRS feed

  • 问题

  • 大家好,
    我想实现,当我按下“下一个按钮的时候”在页面上依次显示我想要的值,比如“第一步”,“第二步”,“第三步”。。。
    具体代码如下
    <div class="tab-content">
    <div class="tab-pane" id="allstep">
    <div class='gg' id='step0'>0</div>
    <div class='gg' id='step1'>1</div>
    <div class='gg' id='step2'>2</div>
    <div class='gg' id='step3'>3</div>
    <div class='gg' id='step4'>4</div>
    </div>
    2016年9月29日 1:08

答案

  •  你好,

    我建议你可以使用jquery 的selector去定位到这个div。

    然后通过next方法来选取下一个,在选中的地方添加一个select的class。

    具体的代码你可以参照下面的:

    <script src="jquery-1.7.1.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    var selectItem = $(".selected");
                    alert(selectItem.attr("id"))
    
                    if (selectItem.next().length == 0) {
                        $("#step0").attr("class", "selected");
                    } else {
                        selectItem.next().attr("class", "selected");
                        selectItem.removeAttr("class");
                    }
                }
                )
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
      
        <div class="tab-content" >
    <div class="tab-pane" id = "allstep">
    <div class='selected' id='step0'>0</div>
    <div id='step1'>1</div>
    <div id='step2'>2</div>
    <div id='step3'>3</div>
    <div id='step4'>4</div>
        </div>
    
        </div>
            <input type="button" id="Button1" value="next" />
        </form>
    </body>

    2016年9月29日 4:49

全部回复

  •  你好,

    我建议你可以使用jquery 的selector去定位到这个div。

    然后通过next方法来选取下一个,在选中的地方添加一个select的class。

    具体的代码你可以参照下面的:

    <script src="jquery-1.7.1.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    var selectItem = $(".selected");
                    alert(selectItem.attr("id"))
    
                    if (selectItem.next().length == 0) {
                        $("#step0").attr("class", "selected");
                    } else {
                        selectItem.next().attr("class", "selected");
                        selectItem.removeAttr("class");
                    }
                }
                )
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
      
        <div class="tab-content" >
    <div class="tab-pane" id = "allstep">
    <div class='selected' id='step0'>0</div>
    <div id='step1'>1</div>
    <div id='step2'>2</div>
    <div id='step3'>3</div>
    <div id='step4'>4</div>
        </div>
    
        </div>
            <input type="button" id="Button1" value="next" />
        </form>
    </body>

    2016年9月29日 4:49
  • 这样?

    <div class='gg' id='step0'>第1步</div>
    <div class='gg' id='step1'>第2步</div>
    <div class='gg' id='step2'>第3步</div>
    <div class='gg' id='step3'>第4步</div>
    <div class='gg' id='step4'>第5步</div>
    
    <button type="button" class="btn btn-default" id="btn">下一步</button>
    
    	<script>
    	$(function(){
    		$('.gg').hide();
    		$('#step0').show();
    		$('#btn').on('click', function(){
    			var curr = $('.gg').not(':hidden');
    			curr.hide();
    			curr.next().show();
    		});
    	});
    	</script>


    • 已编辑 umi-aoi 2016年9月29日 6:20
    2016年9月29日 6:19