次の可視オブジェクトのIDをリンクに追加する

Question

私がここでやろうとしているのは、次のフィールドセットのIDで次のフィールドセットをロードするように、現在の表示フィールドの次のフィールドセットのIDを取得することです。

最高の成果は次のIDの1つを得ることですが、停止します。

$(".next").on("click", function() { 
 

 
    $('this').attr("href", function() { 
 
    return "#" + $('fieldset:visible"').next("fieldset").attr("id"); 
 
    }); 
 
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;} 
 
html,body,fieldset{width:100%;height:100%;} 
 
fieldset{position:relative;} 
 
#one{background-color:red} 
 
#two{background-color:green} 
 
#three{background-color:blue} 
 
#four{background-color:red} 
 
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a class="next" href="#two">NEXT</a> 
 
    <fieldset id="one"></fieldset> 
 
    <fieldset id="two"></fieldset> 
 
    <fieldset id="three"></fieldset> 
 
    <fieldset id="four"></fieldset> 
 
    <fieldset id="five"></fieldset>

Answer 1

ヘルパークラスactiveのlocation.hashを以下のスニペットに示すように使用できます。

これが役に立ちます。

$(".next").on("click", function(e) { 
 
    e.preventDefault(); 
 

 
    $('fieldset.active').removeClass('active').next("fieldset").addClass("active"); 
 

 
    location.hash = "#" + $('fieldset.active').attr('id'); 
 
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;} 
 
html,body,fieldset{width:100%;height:100%;} 
 
fieldset{position:relative;} 
 
#one{background-color:red} 
 
#two{background-color:green} 
 
#three{background-color:blue} 
 
#four{background-color:red} 
 
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a class="next" href="#">NEXT</a> 
 
<fieldset id="one" class='active'></fieldset> 
 
<fieldset id="two"></fieldset> 
 
<fieldset id="three"></fieldset> 
 
<fieldset id="four"></fieldset> 
 
<fieldset id="five"></fieldset>

Answer 2

$(this)... 

あなたは引用符は必要ありません。

Answer 3

あなたは最初にクリックされたものを隠し、その後、彼らはすべて表示されている目に見えるもの

$(".next").on("click", function() { 
 

 
    $(this).attr("href", function() { 
 
    var f= $('fieldset:visible:first'); 
 
    f.hide(); 
 
    return "#" + f.next("fieldset").attr("id"); 
 
    }); 
 
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;} 
 
html,body,fieldset{width:100%;height:100%;} 
 
fieldset{position:relative;} 
 
#one{background-color:red} 
 
#two{background-color:green} 
 
#three{background-color:blue} 
 
#four{background-color:red} 
 
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a class="next" href="#two">NEXT</a> 
 
    <fieldset id="one"></fieldset> 
 
    <fieldset id="two"></fieldset> 
 
    <fieldset id="three"></fieldset> 
 
    <fieldset id="four"></fieldset> 
 
    <fieldset id="five"></fieldset>