jquery einblenden / ausblenden mehrere Elemente durch id

Ich habe 3 Absatz 2 Tasten die Vorherige /nächste. Beim erstmaligen laden kann der Benutzer nur den ersten Absatz und die Schaltfläche weiter, es sei denn, er ist auf dem Absatz 2 wird es eine nächste und eine Schaltfläche "Vorherige" und nur die previous-Taste auf den letzten Absatz. Das ist das Fazit, was ich getan habe.

Mein code funktioniert einwandfrei, außer die zurück-Taste, aber ich bin wirklich nach ist eine sauberere /bessere Weg ist, tun die gleiche Sache.

Meine html hier:

<p id="page-1" class="ui-bottom-article">
blah blah blah 1
<p id="page-2" class="ui-bottom-article">
blah blah blah 2
</p>
<p id="page-3" class="ui-bottom-article">
blah blah blah 3
</p>

<a id="rd_bk" href="">back</a><a id="rd_more" href="">Read more...</a>

mein Skript

$(function() {

     var pageNumber = 1;
         $('p.ui-bottom-article').hide();
         $('#page-1').show();
         $('#rd_bk').hide();



    $('#rd_more, #rd_bk').click(function(e){
        e.preventDefault();

     if(pageNumber == 1){
         $('p.ui-bottom-article').hide();
         $('#page-2').show();
          $('#rd_bk').show();
        pageNumber++;

        }else if(pageNumber == 2){
         $('p.ui-bottom-article').hide();
         $('#page-3').show();
         $('#rd_more').hide();
         $('#rd_bk').show();

        }else if(pageNumber == 3){
         $('p.ui-bottom-article').hide();
         $('#page-1').show();
         $('#rd_more').hide();
        pageNumber--;
        }

    }//end of if statement
    );//end of click function

}); //end of function

InformationsquelleAutor user2279712 | 2013-04-15

  1. 2

    Ich denke, Sie werden nach diesem:

    $(function(){
    $('p.ui-bottom-article').hide(); //all p hidden here
    $('#page-1').show(); //first of it shown
    $('#rd_bk').hide(); //back btn hidden by default

    $('#rd_more').on('click', function (e) {
        e.preventDefault(); //prevent the default behavior of <a>
        $('p:visible').next('p[id^="page-"]').show().siblings('p').hide(); //show the next of the visible page in this case its page-2 is the next one
        ($('p[id^="page-"]').last().is(':visible')) ? $('#rd_more').hide().addBack('#rd_bk').show() : $('#rd_bk').show(); //show hide the next prev btns
    });

    $('#rd_bk').on('click', function (e) {
        e.preventDefault();
        $('p:visible').prev('p[id^="page-"]').show().siblings('p').hide(); //show the prev hidden div and hide the visible one
        ($('p[id^="page-"]').first().is(':visible')) ? $('#rd_bk').hide().addBack('#rd_more').show() : $('#rd_more').show(); //show hide the next prev btns
    });
});

    Aktualisiert Fiddle

    Re-Abfragen der DOM, wie dies ist nicht wirklich ein Reiniger oder besseren Weg, Dinge zu tun. Großer Nein Nein für die Leistung.

    InformationsquelleAutor Jai

  2. 1

    Ich würde so etwas tun:

    (function($) {
  var paras,
      buttons,
      currPara = 0;

  function init() {
    paras = $('.ui-bottom-article');
    buttons = $('#rd_bk, #rd_more');
    buttons.back = buttons.eq(0);
    buttons.more = buttons.eq(1);

    buttons.on('click', buttonClick);
    updateUI();
  }

  function buttonClick(e) {
    //currPara is decreased if we're clicking
    //back or increased if we're clicking more
    currPara += (this === buttons.back[0]) ? -1 : 1;
    updateUI();
    e.preventDefault();
  }

  function updateUI() {
    paras.hide().eq(currPara).show();
    buttons.back.toggle(currPara !== 0);
    buttons.more.toggle(currPara < (paras.length-1));
  }

  //on DOM ready.
  //start 'er up    
  $(init);
}(jQuery));

    DEMO

    InformationsquelleAutor jjenzz

  3. 0

    Sollten Sie verwenden, prev und next-Selektor von jquery für enumration.

    Dieser code könnte für next-und previous-Taste:

    $('#rd_more').click(function()
{
    var next = $('.ui-bottom-article:visible').hide().next('.ui-bottom-article').show();
    if($(next).next('.ui-bottom-article').length == 0)
        $('#rd_more').hide();
    else
        $('#rd_more').show();
});

$('#rd_bk').click(function()
{
    var prev = $('.ui-bottom-article:visible').hide().prev('.ui-bottom-article').show();
    if($(prev).prev('.ui-bottom-article').length == 0)
        $('#rd_bk').hide();
    else
        $('#rd_bk').show();
});

    InformationsquelleAutor Aatif Farooq

Schreibe einen Kommentar